[WIP] adding descriptions to dial segments

gistfile1.txt

        for (let a = 0; a < angles.length; a++) {
            let angle;

            const strokeColor = 'rgba(255, 255, 255, 0.6)';

            if (a === angles.length - 1) {
                angle = (angles[0] + 360 - angles[a]) / 2 + angles[a];
            } else {
                angle = (angles[a + 1] - angles[a]) / 2 + angles[a];
            }
            let startAt = sum(layerSizes, 0, layerSizes.length - 1);
            let layerWidth = startAt + 0.5;

            startAt *= r;
            layerWidth *= r;

            const x1 = startAt * Math.cos(angle / 180 * Math.PI) + containerSize[0] / 2;
            const y1 = startAt * Math.sin(angle / 180 * Math.PI) + containerSize[1] / 2;

            const x2 = (layerWidth) * Math.cos(angle / 180 * Math.PI) + containerSize[0] / 2;
            const y2 = (layerWidth) * Math.sin(angle / 180 * Math.PI) + containerSize[1] / 2;

            // console.log(x1, y1, x2, y2);

            snapRef.line(x1, y1, x2, y2).attr({ stroke: strokeColor });

            if (angle <= 90) {
                snapRef
                .line(x2, y2, containerSize[0] - 80, y2)
                .attr({
                    stroke: strokeColor,
                    class: 'desc'
                });
                snapRef.text(containerSize[0] - 80, y2 - 5, Object.keys(glyphs)[a].toUpperCase()).attr({ textAnchor: 'end' });

            } else {
                snapRef.line(x2, y2, 80, y2).attr({ stroke: strokeColor });
                snapRef.text(80, y2 - 5, Object.keys(glyphs)[a].toUpperCase());

            }

        }