@unovis/ts 1.1.1-beta.0 → 1.1.1-beta.10

package/components/leaflet-map/style.js

@@ -1,7 +1,43 @@
 import { injectGlobal, css } from '@emotion/css';
+import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
 import css_248z from './leaflet.css.js';
 
 injectGlobal(css_248z);
+const cssVarDefaults = {
+    '--vis-map-container-background-color': '#dfe5eb',
+    /* Undefined by default to allow proper fallback to var(--vis-font-family) */
+    '--vis-map-label-font-family': undefined,
+    '--vis-map-point-default-fill-color': '#B9BEC3',
+    '--vis-map-point-ring-fill-color': '#ffffff',
+    '--vis-map-point-default-stroke-color': '#959da3',
+    '--vis-map-point-default-stroke-width': '0px',
+    '--vis-map-point-default-cursor': 'default',
+    '--vis-map-cluster-default-fill-color': '#fff',
+    '--vis-map-cluster-default-stroke-color': '#B9BEC3',
+    '--vis-map-cluster-default-stroke-width': '1.5px',
+    '--vis-map-cluster-donut-fill-color': '#959da3',
+    '--vis-map-cluster-inner-label-text-color-dark': '#5b5f6d',
+    '--vis-map-cluster-inner-label-text-color-light': '#fff',
+    '--vis-map-point-inner-label-text-color-dark': '#5b5f6d',
+    '--vis-map-point-inner-label-text-color-light': '#fff',
+    '--vis-map-point-bottom-label-text-color': '#5b5f6d',
+    '--vis-map-point-bottom-label-font-size': '10px',
+    '--vis-map-cluster-expanded-background-fill-color': '#fff',
+    /* Dark Theme */
+    '--vis-dark-map-container-background-color': '#dfe5eb',
+    '--vis-dark-map-point-default-fill-color': '#B9BEC3',
+    '--vis-dark-map-point-default-stroke-color': '#959da3',
+    '--vis-dark-map-point-ring-fill-color': '#5b5f6d',
+    '--vis-dark-map-cluster-default-fill-color': '#5b5f6d',
+    '--vis-dark-map-cluster-default-stroke-color': '#B9BEC3',
+    '--vis-dark-map-cluster-donut-fill-color': '#959da3',
+    '--vis-dark-map-cluster-inner-label-text-color-dark': '#5b5f6d',
+    '--vis-dark-map-cluster-inner-label-text-color-light': '#fff',
+    '--vis-dark-map-point-inner-label-text-color-dark': '#5b5f6d',
+    '--vis-dark-map-point-inner-label-text-color-light': '#fff',
+    '--vis-dark-map-point-bottom-label-text-color': '#5b5f6d',
+    '--vis-dark-map-cluster-expanded-background-fill-color': '#fff',
+};
 const root = css `
   label: leaflet-map-component;
 
@@ -14,76 +50,8 @@ const root = css `
     pointer-events: all;
   }
 `;
-const variables = injectGlobal `
-  :root {
-    --vis-map-container-background-color: #dfe5eb;
-    // Undefined by default to allow proper fallback to var(--vis-font-family)
-    /* --vis-map-label-font-family, var(--vis-font-family): */
-
-    --vis-map-point-default-fill-color: #B9BEC3;
-    --vis-map-point-ring-fill-color: #ffffff;
-    --vis-map-point-default-stroke-color: #959da3;
-    --vis-map-point-default-stroke-width: 0px;
-    --vis-map-point-default-cursor: default;
-
-    --vis-map-cluster-default-fill-color: #fff;
-    --vis-map-cluster-default-stroke-color: #B9BEC3;
-    --vis-map-cluster-default-stroke-width: 1.5px;
-    --vis-map-cluster-donut-fill-color: #959da3;
-
-    --vis-map-cluster-inner-label-text-color-dark: #5b5f6d;
-    --vis-map-cluster-inner-label-text-color-light: #fff;
-
-    --vis-map-point-inner-label-text-color-dark: #5b5f6d;
-    --vis-map-point-inner-label-text-color-light: #fff;
-
-    --vis-map-point-bottom-label-text-color: #5b5f6d;
-    --vis-map-point-bottom-label-font-size: 10px;
-
-    --vis-map-cluster-expanded-background-fill-color: #fff;
-
-    /* Dark Theme */
-    --vis-dark-map-container-background-color: #dfe5eb;
-    --vis-dark-map-point-default-fill-color: #B9BEC3;
-    --vis-dark-map-point-default-stroke-color: #959da3;
-    --vis-dark-map-point-ring-fill-color: #5b5f6d;
-
-    --vis-dark-map-cluster-default-fill-color: #5b5f6d;
-    --vis-dark-map-cluster-default-stroke-color: #B9BEC3;
-    --vis-dark-map-cluster-donut-fill-color: #959da3;
-
-    --vis-dark-map-cluster-inner-label-text-color-dark: #5b5f6d;
-    --vis-dark-map-cluster-inner-label-text-color-light: #fff;
-
-    --vis-dark-map-point-inner-label-text-color-dark: #5b5f6d;
-    --vis-dark-map-point-inner-label-text-color-light: #fff;
-
-    --vis-dark-map-point-bottom-label-text-color: #eee;
-
-    --vis-dark-map-cluster-expanded-background-fill-color: #fff;
-  }
-
-  body.theme-dark ${`.${root}`} {
-    --vis-map-container-background-color: var(--vis-dark-map-container-background-color);
-    --vis-map-point-default-fill-color: var(--vis-dark-map-point-default-fill-color);
-    --vis-map-point-default-stroke-color: var(--vis-dark-map-point-default-stroke-color);
-    --vis-map-point-ring-fill-color: var(--vis-dark-map-point-ring-fill-color);
-
-    --vis-map-cluster-default-fill-color: var(--vis-dark-map-cluster-default-fill-color);
-    --vis-map-cluster-default-stroke-color: var(--vis-dark-map-cluster-default-stroke-color);
-    --vis-map-cluster-donut-fill-color: var(--vis-dark-map-cluster-donut-fill-color);
-
-    --vis-map-cluster-inner-label-text-color-dark: var(--vis-dark-map-cluster-inner-label-text-color-dark);
-    --vis-map-cluster-inner-label-text-color-light: var(--vis-dark-map-cluster-inner-label-text-color-light);
-
-    --vis-map-point-inner-label-text-color-dark: var(--vis-dark-map-point-inner-label-text-color-dark);
-    --vis-map-point-inner-label-text-color-light: var(--vis-dark-map-point-inner-label-text-color-light);
-
-    --vis-map-point-bottom-label-text-color: var(--vis-dark-map-point-bottom-label-text-color);
-
-    --vis-map-cluster-expanded-background-fill-color: var(--vis-dark-map-cluster-expanded-background-fill-color);
-  }
-`;
+const variables = getCssVarNames(cssVarDefaults);
+injectGlobalCssVariables(cssVarDefaults, root);
 const background = `${root} canvas`;
 const points = css `
   label: g-points;
@@ -96,12 +64,12 @@ const pointPath = css `
 
   stroke-opacity: 1;
   fill-opacity: 1.0;
-  fill: var(--vis-map-point-default-fill-color);
-  stroke: var(--vis-map-point-default-stroke-color);
-  stroke-width: var(--vis-map-point-default-stroke-width);
+  fill: var(${variables.mapPointDefaultFillColor});
+  stroke: var(${variables.mapPointDefaultStrokeColor});
+  stroke-width: var(${variables.mapPointDefaultStrokeWidth});
   pointer-events: fill !important;
   transition: .2s stroke-width, .3s transform;
-  cursor: var(--vis-map-point-default-cursor);
+  cursor: var(${variables.mapPointDefaultCursor});
 
   &:hover {
     stroke-width: 2;
@@ -112,20 +80,20 @@ const pointPath = css `
 `;
 const pointPathRing = css `
   label: point-path-ring;
-  fill: var(--vis-map-point-ring-fill-color);
+  fill: var(${variables.mapPointRingFillColor});
 `;
 const pointPathCluster = css `
   label: point-path-cluster;
   fill-opacity: 0.9;
   stroke: none;
   animation: none;
-  fill: var(--vis-map-cluster-default-fill-color);
-  stroke: var(--vis-map-cluster-default-stroke-color);
-  stroke-width: var(--vis-map-cluster-default-stroke-width);
+  fill: var(${variables.mapClusterDefaultFillColor});
+  stroke: var(${variables.mapClusterDefaultStrokeColor});
+  stroke-width: var(${variables.mapClusterDefaultStrokeWidth});
 `;
 const pointSelectionRing = css `
   label: point-selection-ring;
-  stroke: var(--vis-map-point-default-fill-color);
+  stroke: var(${variables.mapPointDefaultFillColor});
 `;
 const pointSelection = css `
   label: point-selection;
@@ -143,21 +111,21 @@ const innerLabel = css `
   label: inner-label;
 
   text-anchor: middle;
-  fill: var(--vis-map-point-inner-label-text-color-dark);
-  font-family: var(--vis-map-label-font-family, var(--vis-font-family));
+  fill: var(${variables.mapPointInnerLabelTextColorDark});
+  font-family: var(${variables.mapLabelFontFamily}, var(--vis-font-family));
   pointer-events: none;
   font-weight: 600;
 `;
 const innerLabelCluster = css `
   label: inner-label-cluster;
-  fill: var(--vis-map-point-inner-label-text-color-dark);
+  fill: var(${variables.mapPointInnerLabelTextColorDark});
 `;
 const bottomLabel = css `
   label: bottom-label;
 
   text-anchor: middle;
-  fill: var(--vis-map-point-bottom-label-text-color);
-  font-family: var(--vis-map-label-font-family, var(--vis-font-family));
+  fill: var(${variables.mapPointBottomLabelTextColor});
+  font-family: var(${variables.mapLabelFontFamily}, var(--vis-font-family));
   pointer-events: none;
   font-weight: 600;
 `;
@@ -167,7 +135,7 @@ const donutCluster = css `
   transform: scale(1);
   transition: .3s transform;
   path {
-    fill: var(--vis-map-cluster-donut-fill-color);
+    fill: var(${variables.mapClusterDonutFillColor});
     stroke-width: 0.5;
   }
 
@@ -188,7 +156,7 @@ const backgroundRect = css `
 const clusterBackground = css `
   label: cluster-background;
 
-  fill: var(--vis-map-cluster-expanded-background-fill-color);
+  fill: var(${variables.mapClusterExpandedBackgroundFillColor});
   opacity: 0.6;
   visibility: hidden;
 

package/components/leaflet-map/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/leaflet-map/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n// Inject Leaflet global style\n// eslint-disable-next-line\nimport leafletCSS from './leaflet.css'\ninjectGlobal(leafletCSS)\n\nexport const root = css`\n  label: leaflet-map-component;\n\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-color: var(--vis-map-container-background-color);\n\n  canvas {\n    pointer-events: all;\n  }\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-map-container-background-color: #dfe5eb;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-map-label-font-family, var(--vis-font-family): */\n\n    --vis-map-point-default-fill-color: #B9BEC3;\n    --vis-map-point-ring-fill-color: #ffffff;\n    --vis-map-point-default-stroke-color: #959da3;\n    --vis-map-point-default-stroke-width: 0px;\n    --vis-map-point-default-cursor: default;\n\n    --vis-map-cluster-default-fill-color: #fff;\n    --vis-map-cluster-default-stroke-color: #B9BEC3;\n    --vis-map-cluster-default-stroke-width: 1.5px;\n    --vis-map-cluster-donut-fill-color: #959da3;\n\n    --vis-map-cluster-inner-label-text-color-dark: #5b5f6d;\n    --vis-map-cluster-inner-label-text-color-light: #fff;\n\n    --vis-map-point-inner-label-text-color-dark: #5b5f6d;\n    --vis-map-point-inner-label-text-color-light: #fff;\n\n    --vis-map-point-bottom-label-text-color: #5b5f6d;\n    --vis-map-point-bottom-label-font-size: 10px;\n\n    --vis-map-cluster-expanded-background-fill-color: #fff;\n\n    /* Dark Theme */\n    --vis-dark-map-container-background-color: #dfe5eb;\n    --vis-dark-map-point-default-fill-color: #B9BEC3;\n    --vis-dark-map-point-default-stroke-color: #959da3;\n    --vis-dark-map-point-ring-fill-color: #5b5f6d;\n\n    --vis-dark-map-cluster-default-fill-color: #5b5f6d;\n    --vis-dark-map-cluster-default-stroke-color: #B9BEC3;\n    --vis-dark-map-cluster-donut-fill-color: #959da3;\n\n    --vis-dark-map-cluster-inner-label-text-color-dark: #5b5f6d;\n    --vis-dark-map-cluster-inner-label-text-color-light: #fff;\n\n    --vis-dark-map-point-inner-label-text-color-dark: #5b5f6d;\n    --vis-dark-map-point-inner-label-text-color-light: #fff;\n\n    --vis-dark-map-point-bottom-label-text-color: #eee;\n\n    --vis-dark-map-cluster-expanded-background-fill-color: #fff;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-map-container-background-color: var(--vis-dark-map-container-background-color);\n    --vis-map-point-default-fill-color: var(--vis-dark-map-point-default-fill-color);\n    --vis-map-point-default-stroke-color: var(--vis-dark-map-point-default-stroke-color);\n    --vis-map-point-ring-fill-color: var(--vis-dark-map-point-ring-fill-color);\n\n    --vis-map-cluster-default-fill-color: var(--vis-dark-map-cluster-default-fill-color);\n    --vis-map-cluster-default-stroke-color: var(--vis-dark-map-cluster-default-stroke-color);\n    --vis-map-cluster-donut-fill-color: var(--vis-dark-map-cluster-donut-fill-color);\n\n    --vis-map-cluster-inner-label-text-color-dark: var(--vis-dark-map-cluster-inner-label-text-color-dark);\n    --vis-map-cluster-inner-label-text-color-light: var(--vis-dark-map-cluster-inner-label-text-color-light);\n\n    --vis-map-point-inner-label-text-color-dark: var(--vis-dark-map-point-inner-label-text-color-dark);\n    --vis-map-point-inner-label-text-color-light: var(--vis-dark-map-point-inner-label-text-color-light);\n\n    --vis-map-point-bottom-label-text-color: var(--vis-dark-map-point-bottom-label-text-color);\n\n    --vis-map-cluster-expanded-background-fill-color: var(--vis-dark-map-cluster-expanded-background-fill-color);\n  }\n`\n\nexport const background = `${root} canvas`\n\nexport const points = css`\n  label: g-points;\n`\n\nexport const point = css`\n  label: g-point;\n`\n\nexport const pointPath = css`\n  label: point-path;\n\n  stroke-opacity: 1;\n  fill-opacity: 1.0;\n  fill: var(--vis-map-point-default-fill-color);\n  stroke: var(--vis-map-point-default-stroke-color);\n  stroke-width: var(--vis-map-point-default-stroke-width);\n  pointer-events: fill !important;\n  transition: .2s stroke-width, .3s transform;\n  cursor: var(--vis-map-point-default-cursor);\n\n  &:hover {\n    stroke-width: 2;\n    fill-opacity: 1;\n    animation: none;\n    transform: scale(1.1);\n  }\n`\n\nexport const pointPathRing = css`\n  label: point-path-ring;\n  fill: var(--vis-map-point-ring-fill-color);\n`\n\nexport const pointPathCluster = css`\n  label: point-path-cluster;\n  fill-opacity: 0.9;\n  stroke: none;\n  animation: none;\n  fill: var(--vis-map-cluster-default-fill-color);\n  stroke: var(--vis-map-cluster-default-stroke-color);\n  stroke-width: var(--vis-map-cluster-default-stroke-width);\n`\n\nexport const pointSelectionRing = css`\n  label: point-selection-ring;\n  stroke: var(--vis-map-point-default-fill-color);\n`\n\nexport const pointSelection = css`\n  label: point-selection;\n\n  opacity: 0;\n  transform: scale(1);\n\n  &.active {\n    transition: all 400ms cubic-bezier(0.230, 1.000, 0.320, 1.000);\n    opacity: 1;\n    transform: scale(1.25);\n  }\n`\n\nexport const innerLabel = css`\n  label: inner-label;\n\n  text-anchor: middle;\n  fill: var(--vis-map-point-inner-label-text-color-dark);\n  font-family: var(--vis-map-label-font-family, var(--vis-font-family));\n  pointer-events: none;\n  font-weight: 600;\n`\n\nexport const innerLabelCluster = css`\n  label: inner-label-cluster;\n  fill: var(--vis-map-point-inner-label-text-color-dark);\n`\n\nexport const bottomLabel = css`\n  label: bottom-label;\n\n  text-anchor: middle;\n  fill: var(--vis-map-point-bottom-label-text-color);\n  font-family: var(--vis-map-label-font-family, var(--vis-font-family));\n  pointer-events: none;\n  font-weight: 600;\n`\n\nexport const donutCluster = css`\n  label: donut-cluster;\n\n  transform: scale(1);\n  transition: .3s transform;\n  path {\n    fill: var(--vis-map-cluster-donut-fill-color);\n    stroke-width: 0.5;\n  }\n\n  &:hover {\n    transform: scale(1.1);\n  }\n`\n\nexport const svgOverlay = css`\n  label: svg-overlay;\n  position: absolute;\n  pointer-events: none;\n`\n\nexport const backgroundRect = css`\n  label: background-rect;\n\n  opacity: 0;\n`\n\nexport const clusterBackground = css`\n  label: cluster-background;\n\n  fill: var(--vis-map-cluster-expanded-background-fill-color);\n  opacity: 0.6;\n  visibility: hidden;\n\n  &.active {\n    visibility: visible;\n  }\n`\n\nexport const onFeatureHover = css`\n  label: feature-hovered;\n`\n\nexport const mapboxglCanvas = css`\n  pointer-events: all;\n  cursor: grab;\n\n  &${`.${onFeatureHover}`} {\n    cursor: default;\n  }\n`\n\nexport const map = css`\n  label: map;\n`\n"],"names":["leafletCSS"],"mappings":";;;AAKA,YAAY,CAACA,QAAU,CAAC,CAAA;AAEjB,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;EAoB7B;AAEY,MAAA,UAAU,GAAG,CAAG,EAAA,IAAI,UAAS;AAEnC,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;EAkB3B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQlC;AAEM,MAAM,kBAAkB,GAAG,GAAG,CAAA,CAAA;;;EAGpC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;EAGnC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAa9B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;EAIhC;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUnC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;AAI5B,GAAA,EAAA,CAAA,CAAA,EAAI,cAAc,CAAE,CAAA,CAAA;;;EAGxB;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/leaflet-map/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\n// Inject Leaflet global style\n// eslint-disable-next-line\nimport leafletCSS from './leaflet.css'\ninjectGlobal(leafletCSS)\n\nconst cssVarDefaults = {\n  '--vis-map-container-background-color': '#dfe5eb',\n  /* Undefined by default to allow proper fallback to var(--vis-font-family) */\n  '--vis-map-label-font-family': undefined,\n\n  '--vis-map-point-default-fill-color': '#B9BEC3',\n  '--vis-map-point-ring-fill-color': '#ffffff',\n  '--vis-map-point-default-stroke-color': '#959da3',\n  '--vis-map-point-default-stroke-width': '0px',\n  '--vis-map-point-default-cursor': 'default',\n\n  '--vis-map-cluster-default-fill-color': '#fff',\n  '--vis-map-cluster-default-stroke-color': '#B9BEC3',\n  '--vis-map-cluster-default-stroke-width': '1.5px',\n  '--vis-map-cluster-donut-fill-color': '#959da3',\n\n  '--vis-map-cluster-inner-label-text-color-dark': '#5b5f6d',\n  '--vis-map-cluster-inner-label-text-color-light': '#fff',\n\n  '--vis-map-point-inner-label-text-color-dark': '#5b5f6d',\n  '--vis-map-point-inner-label-text-color-light': '#fff',\n\n  '--vis-map-point-bottom-label-text-color': '#5b5f6d',\n  '--vis-map-point-bottom-label-font-size': '10px',\n\n  '--vis-map-cluster-expanded-background-fill-color': '#fff',\n\n  /* Dark Theme */\n  '--vis-dark-map-container-background-color': '#dfe5eb',\n  '--vis-dark-map-point-default-fill-color': '#B9BEC3',\n  '--vis-dark-map-point-default-stroke-color': '#959da3',\n  '--vis-dark-map-point-ring-fill-color': '#5b5f6d',\n\n  '--vis-dark-map-cluster-default-fill-color': '#5b5f6d',\n  '--vis-dark-map-cluster-default-stroke-color': '#B9BEC3',\n  '--vis-dark-map-cluster-donut-fill-color': '#959da3',\n\n  '--vis-dark-map-cluster-inner-label-text-color-dark': '#5b5f6d',\n  '--vis-dark-map-cluster-inner-label-text-color-light': '#fff',\n\n  '--vis-dark-map-point-inner-label-text-color-dark': '#5b5f6d',\n  '--vis-dark-map-point-inner-label-text-color-light': '#fff',\n\n  '--vis-dark-map-point-bottom-label-text-color': '#5b5f6d',\n\n  '--vis-dark-map-cluster-expanded-background-fill-color': '#fff',\n}\n\nexport const root = css`\n  label: leaflet-map-component;\n\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-color: var(--vis-map-container-background-color);\n\n  canvas {\n    pointer-events: all;\n  }\n`\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const background = `${root} canvas`\n\nexport const points = css`\n  label: g-points;\n`\n\nexport const point = css`\n  label: g-point;\n`\n\nexport const pointPath = css`\n  label: point-path;\n\n  stroke-opacity: 1;\n  fill-opacity: 1.0;\n  fill: var(${variables.mapPointDefaultFillColor});\n  stroke: var(${variables.mapPointDefaultStrokeColor});\n  stroke-width: var(${variables.mapPointDefaultStrokeWidth});\n  pointer-events: fill !important;\n  transition: .2s stroke-width, .3s transform;\n  cursor: var(${variables.mapPointDefaultCursor});\n\n  &:hover {\n    stroke-width: 2;\n    fill-opacity: 1;\n    animation: none;\n    transform: scale(1.1);\n  }\n`\n\nexport const pointPathRing = css`\n  label: point-path-ring;\n  fill: var(${variables.mapPointRingFillColor});\n`\n\nexport const pointPathCluster = css`\n  label: point-path-cluster;\n  fill-opacity: 0.9;\n  stroke: none;\n  animation: none;\n  fill: var(${variables.mapClusterDefaultFillColor});\n  stroke: var(${variables.mapClusterDefaultStrokeColor});\n  stroke-width: var(${variables.mapClusterDefaultStrokeWidth});\n`\n\nexport const pointSelectionRing = css`\n  label: point-selection-ring;\n  stroke: var(${variables.mapPointDefaultFillColor});\n`\n\nexport const pointSelection = css`\n  label: point-selection;\n\n  opacity: 0;\n  transform: scale(1);\n\n  &.active {\n    transition: all 400ms cubic-bezier(0.230, 1.000, 0.320, 1.000);\n    opacity: 1;\n    transform: scale(1.25);\n  }\n`\n\nexport const innerLabel = css`\n  label: inner-label;\n\n  text-anchor: middle;\n  fill: var(${variables.mapPointInnerLabelTextColorDark});\n  font-family: var(${variables.mapLabelFontFamily}, var(--vis-font-family));\n  pointer-events: none;\n  font-weight: 600;\n`\n\nexport const innerLabelCluster = css`\n  label: inner-label-cluster;\n  fill: var(${variables.mapPointInnerLabelTextColorDark});\n`\n\nexport const bottomLabel = css`\n  label: bottom-label;\n\n  text-anchor: middle;\n  fill: var(${variables.mapPointBottomLabelTextColor});\n  font-family: var(${variables.mapLabelFontFamily}, var(--vis-font-family));\n  pointer-events: none;\n  font-weight: 600;\n`\n\nexport const donutCluster = css`\n  label: donut-cluster;\n\n  transform: scale(1);\n  transition: .3s transform;\n  path {\n    fill: var(${variables.mapClusterDonutFillColor});\n    stroke-width: 0.5;\n  }\n\n  &:hover {\n    transform: scale(1.1);\n  }\n`\n\nexport const svgOverlay = css`\n  label: svg-overlay;\n  position: absolute;\n  pointer-events: none;\n`\n\nexport const backgroundRect = css`\n  label: background-rect;\n\n  opacity: 0;\n`\n\nexport const clusterBackground = css`\n  label: cluster-background;\n\n  fill: var(${variables.mapClusterExpandedBackgroundFillColor});\n  opacity: 0.6;\n  visibility: hidden;\n\n  &.active {\n    visibility: visible;\n  }\n`\n\nexport const onFeatureHover = css`\n  label: feature-hovered;\n`\n\nexport const mapboxglCanvas = css`\n  pointer-events: all;\n  cursor: grab;\n\n  &${`.${onFeatureHover}`} {\n    cursor: default;\n  }\n`\n\nexport const map = css`\n  label: map;\n`\n"],"names":["leafletCSS"],"mappings":"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"}

package/components/nested-donut/config.d.ts

@@ -0,0 +1,59 @@
+import { ComponentConfigInterface, ComponentConfig } from "../../core/component/config";
+import { ColorAccessor, GenericAccessor, StringAccessor } from "../../types/accessor";
+import { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types';
+export interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {
+    /** Diagram angle range. Default: `[0, 2 * Math.PI]` */
+    angleRange?: [number, number];
+    /** Direction of hierarchy flow from root to leaf.
+     * `NestedDonutDirection.INWARDS` starts from the outer most radius and works towards center
+     * `NestedDonutDirection.OUTWARDS` starts from the inner most radius the consecutive layers outward.
+     *  Default: `NestedDonutDirection.INWARDS`
+    */
+    direction?: NestedDonutDirection | string;
+    /** Central label text. Default: `undefined` */
+    centralLabel?: string;
+    /** Central sub-label accessor function or text. Default: `undefined` */
+    centralSubLabel?: string;
+    /** Enables wrapping for the sub-label. Default: `true` */
+    centralSubLabelWrap?: boolean;
+    /**
+     * Show donut background. The color is configurable via
+     * the `--vis-nested-donut-background-color` and `--vis-dark-nested-donut-background-color` CSS variables.
+     * Default: `true`
+    */
+    showBackground?: boolean;
+    /** Array of accessor functions to defined the nested groups  */
+    layers: StringAccessor<Datum>[];
+    layerConfig?: GenericAccessor<NestedDonutLayerSettings, string>;
+    layerPadding?: number;
+    /** Color accessor function. Default: `undefined` */
+    color?: ColorAccessor<NestedDonutSegment<Datum>>;
+    /** Corner Radius. Default: `0` */
+    cornerRadius?: number;
+    /** Label accessor function. */
+    label?: StringAccessor<NestedDonutSegment<Datum>>;
+    /**
+     * When true, the component will display empty segments (the ones that have `0` values) as tiny slices.
+     * Default: `false`
+     * */
+    showEmptySegments?: boolean;
+    /** Angular size for empty segments in radians. Default: `0.5 * Math.PI / 180` */
+    emptySegmentAngle?: number;
+}
+export declare class NestedDonutConfig<Datum> extends ComponentConfig implements NestedDonutConfigInterface<Datum> {
+    centralLabel?: string;
+    centralSubLabel?: string;
+    centralSubLabelWrap?: boolean;
+    showEmptySegments?: boolean;
+    emptySegmentAngle?: number;
+    color?: ColorAccessor<NestedDonutSegment<Datum>>;
+    label?: StringAccessor<NestedDonutSegment<Datum>>;
+    direction: NestedDonutDirection;
+    layers: StringAccessor<Datum>[];
+    layerSettings: any;
+    layerPadding: number;
+    angleRange: [number, number];
+    padAngle: number;
+    cornerRadius: number;
+    showBackground: boolean;
+}

package/components/nested-donut/config.js

@@ -0,0 +1,19 @@
+import { ComponentConfig } from '../../core/component/config.js';
+import { NestedDonutDirection } from './types.js';
+
+// Core
+class NestedDonutConfig extends ComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.direction = NestedDonutDirection.INWARDS;
+        this.layerSettings = undefined;
+        this.layerPadding = 0;
+        this.angleRange = [0, 2 * Math.PI];
+        this.padAngle = 0;
+        this.cornerRadius = 0;
+        this.showBackground = true;
+    }
+}
+
+export { NestedDonutConfig };
+//# sourceMappingURL=config.js.map

package/components/nested-donut/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/nested-donut/config.ts"],"sourcesContent":["// Core\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, GenericAccessor, StringAccessor } from 'types/accessor'\nimport { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types'\n\n\nexport interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {\n  /** Diagram angle range. Default: `[0, 2 * Math.PI]` */\n  angleRange?: [number, number];\n  /** Direction of hierarchy flow from root to leaf.\n   * `NestedDonutDirection.INWARDS` starts from the outer most radius and works towards center\n   * `NestedDonutDirection.OUTWARDS` starts from the inner most radius the consecutive layers outward.\n   *  Default: `NestedDonutDirection.INWARDS`\n  */\n  direction?: NestedDonutDirection | string;\n\n  /** Central label text. Default: `undefined` */\n  centralLabel?: string;\n  /** Central sub-label accessor function or text. Default: `undefined` */\n  centralSubLabel?: string;\n  /** Enables wrapping for the sub-label. Default: `true` */\n  centralSubLabelWrap?: boolean;\n  /**\n   * Show donut background. The color is configurable via\n   * the `--vis-nested-donut-background-color` and `--vis-dark-nested-donut-background-color` CSS variables.\n   * Default: `true`\n  */\n  showBackground?: boolean;\n\n  // Layers\n  /** Array of accessor functions to defined the nested groups  */\n  layers: StringAccessor<Datum>[];\n  /* Layer settings */\n  layerConfig?: GenericAccessor<NestedDonutLayerSettings, string>;\n  /* Space between layers */\n  layerPadding?: number;\n\n  // Segments\n  /** Color accessor function. Default: `undefined` */\n  color?: ColorAccessor<NestedDonutSegment<Datum>>;\n  /** Corner Radius. Default: `0` */\n  cornerRadius?: number;\n  /** Label accessor function. */\n  label?: StringAccessor<NestedDonutSegment<Datum>>;\n  /**\n   * When true, the component will display empty segments (the ones that have `0` values) as tiny slices.\n   * Default: `false`\n   * */\n  showEmptySegments?: boolean;\n  /** Angular size for empty segments in radians. Default: `0.5 * Math.PI / 180` */\n  emptySegmentAngle?: number;\n}\n\nexport class NestedDonutConfig<Datum> extends ComponentConfig implements NestedDonutConfigInterface<Datum> {\n  centralLabel?: string\n  centralSubLabel?: string\n  centralSubLabelWrap?: boolean\n  showEmptySegments?: boolean\n  emptySegmentAngle?: number\n\n  color?: ColorAccessor<NestedDonutSegment<Datum>>\n  label?: StringAccessor<NestedDonutSegment<Datum>>\n  direction = NestedDonutDirection.INWARDS\n  layers: StringAccessor<Datum>[]\n  layerSettings = undefined\n  layerPadding = 0\n  angleRange = [0, 2 * Math.PI] as [number, number]\n  padAngle = 0\n  cornerRadius = 0\n  showBackground = true\n}\n\n\n"],"names":[],"mappings":";;;AAAA;AAuDM,MAAO,iBAAyB,SAAQ,eAAe,CAAA;AAA7D,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAA;QAExC,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAU,CAAA,UAAA,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAqB,CAAA;QACjD,IAAQ,CAAA,QAAA,GAAG,CAAC,CAAA;QACZ,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAc,CAAA,cAAA,GAAG,IAAI,CAAA;KACtB;AAAA;;;;"}

package/components/nested-donut/index.d.ts

@@ -0,0 +1,38 @@
+import { Selection } from 'd3-selection';
+import { ScaleLinear } from 'd3-scale';
+import { ComponentCore } from "../../core/component";
+import { SeriesDataModel } from "../../data-models/series";
+import { NestedDonutSegment } from './types';
+import { NestedDonutConfig, NestedDonutConfigInterface } from './config';
+import * as s from './style';
+export declare class NestedDonut<Datum> extends ComponentCore<Datum[], NestedDonutConfig<Datum>, NestedDonutConfigInterface<Datum>> {
+    static selectors: typeof s;
+    static cssVariables: {
+        nestedDonutBackgroundColor: "--vis-nested-donut-background-color";
+        nestedDonutFontFamily: "--vis-nested-donut-font-family";
+        nestedDonutCentralLabelFontSize: "--vis-nested-donut-central-label-font-size";
+        nestedDonutCentralLabelFontWeight: "--vis-nested-donut-central-label-font-weight";
+        nestedDonutCentralLabelTextColor: "--vis-nested-donut-central-label-text-color";
+        nestedDonutCentralSublabelFontSize: "--vis-nested-donut-central-sublabel-font-size";
+        nestedDonutCentralSublabelFontWeight: "--vis-nested-donut-central-sublabel-font-weight";
+        nestedDonutCentralSublabelTextColor: "--vis-nested-donut-central-sublabel-text-color";
+        nestedDonutSegmentStrokeWidth: "--vis-nested-donut-segment-stroke-width";
+        nestedDonutSegmentStrokeColor: "--vis-nested-donut-segment-stroke-color";
+        darkNestedDonutBackgroundColor: "--vis-dark-nested-donut-background-color";
+        darkNestedDonutCentralLabelTextColor: "--vis-dark-nested-donut-central-label-text-color";
+        darkNestedDonutCentralSublabelTextColor: "--vis-dark-nested-donut-central-sublabel-text-color";
+    };
+    config: NestedDonutConfig<Datum>;
+    datamodel: SeriesDataModel<Datum>;
+    arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>;
+    arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>;
+    centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>;
+    arcGen: import("d3-shape").Arc<any, Partial<NestedDonutSegment<Datum>>>;
+    radiusScale: ScaleLinear<number, number>;
+    colorScale: ScaleLinear<string, string>;
+    events: {};
+    constructor(config?: NestedDonutConfigInterface<Datum>);
+    private getHierarchyData;
+    _render(customDuration?: number): void;
+}

package/components/nested-donut/index.js

@@ -0,0 +1,133 @@
+import { arc } from 'd3-shape';
+import { hierarchy, partition } from 'd3-hierarchy';
+import { scaleLinear } from 'd3-scale';
+import { group, sum, min, max } from 'd3-array';
+import { ComponentCore } from '../../core/component/index.js';
+import { SeriesDataModel } from '../../data-models/series.js';
+import { VerticalAlign } from '../../types/text.js';
+import { getColor, getHexValue } from '../../utils/color.js';
+import { getString, isNumber, getValue } from '../../utils/data.js';
+import { smartTransition } from '../../utils/d3.js';
+import { wrapSVGText } from '../../utils/text.js';
+import { defaultLayerSettings, NestedDonutDirection } from './types.js';
+import { NestedDonutConfig } from './config.js';
+import { createArc, updateArc, removeArc } from './modules/arc.js';
+import { createLabel, updateLabel, removeLabel } from './modules/label.js';
+import * as style from './style.js';
+import { centralLabel, centralSubLabel, segment, segmentExit, segmentLabel, background, variables } from './style.js';
+
+class NestedDonut extends ComponentCore {
+    constructor(config) {
+        super();
+        this.config = new NestedDonutConfig();
+        this.datamodel = new SeriesDataModel();
+        this.arcGen = arc();
+        this.radiusScale = scaleLinear();
+        this.colorScale = scaleLinear();
+        this.events = {};
+        if (config)
+            this.config.init(config);
+        this.arcBackground = this.g.append('path');
+        this.arcGroup = this.g.append('g');
+        this.centralLabel = this.g.append('text')
+            .attr('class', centralLabel);
+        this.centralSubLabel = this.g.append('text')
+            .attr('class', centralSubLabel);
+    }
+    getHierarchyData() {
+        var _a;
+        const { config, datamodel } = this;
+        const layerAccessors = (_a = config.layers) === null || _a === void 0 ? void 0 : _a.map(layerAccessor => (d, i) => getString(d, layerAccessor, i));
+        const nestedData = group(datamodel.data, ...layerAccessors);
+        const rootNode = hierarchy(nestedData).count();
+        const partitionData = partition().size([config.angleRange[1], 1])(rootNode);
+        partitionData.eachBefore((node, index) => {
+            var _a, _b, _c, _d;
+            const scale = this.colorScale.domain([-1, (_a = node.children) === null || _a === void 0 ? void 0 : _a.length]);
+            node._id = this.uid + index;
+            node._layer = node.depth - 1;
+            node.data = { key: node.data[0], root: (_c = (_b = node.parent) === null || _b === void 0 ? void 0 : _b.data.root) !== null && _c !== void 0 ? _c : node.data[0] };
+            (_d = node.children) === null || _d === void 0 ? void 0 : _d.forEach((child, i) => {
+                var _a;
+                child._index = i;
+                child._state = {
+                    fill: (_a = getColor(child, config.color, i, child.depth !== 1)) !== null && _a !== void 0 ? _a : scale.range(['#fff', getHexValue(node._state.fill, this.element)])(i),
+                };
+            });
+        });
+        const segments = partitionData.descendants().filter(d => d.parent && d.children && d.data.key);
+        return segments;
+    }
+    _render(customDuration) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const { config } = this;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        const layers = (_a = config.layers) === null || _a === void 0 ? void 0 : _a.map((_, i) => { var _a; return (_a = getValue(i, config.layerSettings)) !== null && _a !== void 0 ? _a : defaultLayerSettings; });
+        const data = this.getHierarchyData();
+        const outerRadius = Math.min(this._width, this._height) / 2;
+        const innerRadius = Math.max(0, outerRadius - sum(layers, d => d.width + config.layerPadding));
+        const yMin = min(data, d => d.y0);
+        const yMax = max(data, d => d.y1);
+        this.radiusScale
+            .domain(config.direction === NestedDonutDirection.OUTWARDS ? [yMin, yMax] : [yMax, yMin])
+            .range([innerRadius, outerRadius]);
+        this.arcGen
+            .startAngle(d => d.x0)
+            .endAngle(d => d.x1)
+            .innerRadius(d => this.radiusScale(d.y0))
+            .outerRadius(d => this.radiusScale(d.y1))
+            .padAngle(config.padAngle)
+            .cornerRadius(config.cornerRadius);
+        this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
+        // Arcs
+        const arcs = this.arcGroup
+            .selectAll(`.${segment}`)
+            .data(data, d => d._id);
+        const arcsEnter = arcs.enter().append('path')
+            .attr('class', segment)
+            .call(createArc, config);
+        arcs.merge(arcsEnter)
+            .call(updateArc, config, this.arcGen, duration);
+        arcs.exit()
+            .attr('class', segmentExit)
+            .call(removeArc, duration);
+        // Segment labels
+        const arcLabels = this.arcGroup
+            .selectAll(`.${segmentLabel}`)
+            .data(data, d => d._id);
+        const arcLabelsEnter = arcLabels.enter().append('text')
+            .attr('class', segmentLabel)
+            .call(createLabel, config);
+        arcLabels.merge(arcLabelsEnter)
+            .call(updateLabel, config, this.arcGen, duration);
+        arcLabels.exit()
+            .call(removeLabel, duration);
+        // Chart labels
+        this.centralLabel
+            .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
+            .attr('dy', config.centralSubLabel ? '-0.55em' : null)
+            .text((_b = config.centralLabel) !== null && _b !== void 0 ? _b : null);
+        this.centralSubLabel
+            .attr('transform', `translate(${this._width / 2},${this._height / 2})`)
+            .attr('dy', config.centralLabel ? '0.55em' : null)
+            .text((_c = config.centralSubLabel) !== null && _c !== void 0 ? _c : null);
+        if (config.centralSubLabelWrap)
+            wrapSVGText(this.centralSubLabel, innerRadius * 1.9, VerticalAlign.Top);
+        // Background
+        this.arcBackground.attr('class', background)
+            .attr('visibility', config.showBackground ? null : 'hidden')
+            .attr('transform', `translate(${this._width / 2},${this._height / 2})`);
+        smartTransition(this.arcBackground, duration)
+            .attr('d', arc()({
+            startAngle: (_g = (_e = (_d = config.angleRange) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : (_f = config.angleRange) === null || _f === void 0 ? void 0 : _f[0]) !== null && _g !== void 0 ? _g : 0,
+            endAngle: (_l = (_j = (_h = config.angleRange) === null || _h === void 0 ? void 0 : _h[1]) !== null && _j !== void 0 ? _j : (_k = config.angleRange) === null || _k === void 0 ? void 0 : _k[1]) !== null && _l !== void 0 ? _l : 2 * Math.PI,
+            innerRadius,
+            outerRadius,
+        }));
+    }
+}
+NestedDonut.selectors = style;
+NestedDonut.cssVariables = variables;
+
+export { NestedDonut };
+//# sourceMappingURL=index.js.map

package/components/nested-donut/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/nested-donut/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { arc } from 'd3-shape'\nimport { hierarchy, partition } from 'd3-hierarchy'\nimport { scaleLinear, ScaleLinear } from 'd3-scale'\nimport { group, max, min, sum } from 'd3-array'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Types\nimport { VerticalAlign } from 'types/text'\n\n// Utils\nimport { getColor, getHexValue } from 'utils/color'\nimport { getString, getValue, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { wrapSVGText } from 'utils/text'\n\n// Local Types\nimport { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment, defaultLayerSettings } from './types'\n\n// Config\nimport { NestedDonutConfig, NestedDonutConfigInterface } from './config'\n\n// Modules\nimport { createArc, updateArc, removeArc } from './modules/arc'\nimport { createLabel, updateLabel, removeLabel } from './modules/label'\n\n// Styles\nimport * as s from './style'\n\nexport class NestedDonut<Datum> extends ComponentCore<\nDatum[],\nNestedDonutConfig<Datum>,\nNestedDonutConfigInterface<Datum>\n> {\n  static selectors = s\n  static cssVariables = s.variables\n  config: NestedDonutConfig<Datum> = new NestedDonutConfig()\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n  arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>\n  arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n  centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n  centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n\n  arcGen = arc<Partial<NestedDonutSegment<Datum>>>()\n  radiusScale: ScaleLinear<number, number> = scaleLinear()\n  colorScale: ScaleLinear<string, string> = scaleLinear()\n\n  events = { }\n\n  constructor (config?: NestedDonutConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n    this.arcBackground = this.g.append('path')\n    this.arcGroup = this.g.append('g')\n    this.centralLabel = this.g.append('text')\n      .attr('class', s.centralLabel)\n    this.centralSubLabel = this.g.append('text')\n      .attr('class', s.centralSubLabel)\n  }\n\n  private getHierarchyData (): NestedDonutSegment<Datum>[] {\n    const { config, datamodel } = this\n\n    const layerAccessors = config.layers?.map(layerAccessor => (d: Datum, i: number) => getString(d, layerAccessor, i))\n    const nestedData = group(datamodel.data, ...layerAccessors as [(d: Datum) => string])\n    const rootNode = hierarchy(nestedData).count()\n    const partitionData = partition().size([config.angleRange[1], 1])(rootNode) as NestedDonutSegment<Datum>\n\n    partitionData.eachBefore((node, index) => {\n      const scale = this.colorScale.domain([-1, node.children?.length])\n      node._id = this.uid + index\n      node._layer = node.depth - 1\n\n      node.data = { key: node.data[0], root: node.parent?.data.root ?? node.data[0] }\n      node.children?.forEach((child, i) => {\n        child._index = i\n        child._state = {\n          fill:\n            getColor(child, config.color, i, child.depth !== 1) ??\n            scale.range(['#fff', getHexValue(node._state.fill, this.element)])(i),\n        }\n      })\n    })\n    const segments = partitionData.descendants().filter(d => d.parent && d.children && d.data.key)\n    return segments\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const layers: NestedDonutLayerSettings[] = config.layers?.map((_, i) => getValue(i, config.layerSettings) ?? defaultLayerSettings)\n    const data = this.getHierarchyData()\n\n    const outerRadius = Math.min(this._width, this._height) / 2\n    const innerRadius = Math.max(0, outerRadius - sum(layers, d => d.width + config.layerPadding))\n\n    const yMin = min(data, d => d.y0)\n    const yMax = max(data, d => d.y1)\n\n    this.radiusScale\n      .domain(config.direction === NestedDonutDirection.OUTWARDS ? [yMin, yMax] : [yMax, yMin])\n      .range([innerRadius, outerRadius])\n\n    this.arcGen\n      .startAngle(d => d.x0)\n      .endAngle(d => d.x1)\n      .innerRadius(d => this.radiusScale(d.y0))\n      .outerRadius(d => this.radiusScale(d.y1))\n      .padAngle(config.padAngle)\n      .cornerRadius(config.cornerRadius)\n\n    this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    // Arcs\n    const arcs = this.arcGroup\n      .selectAll<SVGPathElement, NestedDonutSegment<Datum>>(`.${s.segment}`)\n      .data(data, d => d._id)\n\n    const arcsEnter = arcs.enter().append('path')\n      .attr('class', s.segment)\n      .call(createArc, config)\n\n    arcs.merge(arcsEnter)\n      .call(updateArc, config, this.arcGen, duration)\n\n    arcs.exit<NestedDonutSegment<Datum>>()\n      .attr('class', s.segmentExit)\n      .call(removeArc, duration)\n\n    // Segment labels\n    const arcLabels = this.arcGroup\n      .selectAll<SVGTextElement, NestedDonutSegment<Datum>>(`.${s.segmentLabel}`)\n      .data(data, d => d._id)\n\n    const arcLabelsEnter = arcLabels.enter().append('text')\n      .attr('class', s.segmentLabel)\n      .call(createLabel, config)\n\n    arcLabels.merge(arcLabelsEnter)\n      .call(updateLabel, config, this.arcGen, duration)\n\n    arcLabels.exit<NestedDonutSegment<Datum>>()\n      .call(removeLabel, duration)\n\n    // Chart labels\n    this.centralLabel\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n      .attr('dy', config.centralSubLabel ? '-0.55em' : null)\n      .text(config.centralLabel ?? null)\n\n    this.centralSubLabel\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n      .attr('dy', config.centralLabel ? '0.55em' : null)\n      .text(config.centralSubLabel ?? null)\n\n    if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, innerRadius * 1.9, VerticalAlign.Top)\n\n    // Background\n    this.arcBackground.attr('class', s.background)\n      .attr('visibility', config.showBackground ? null : 'hidden')\n      .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n    smartTransition(this.arcBackground, duration)\n      .attr('d', arc()({\n        startAngle: config.angleRange?.[0] ?? config.angleRange?.[0] ?? 0,\n        endAngle: config.angleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,\n        innerRadius,\n        outerRadius,\n      }))\n  }\n}\n"],"names":["s.centralLabel","s.centralSubLabel","s.segment","s.segmentExit","s.segmentLabel","s.background","s","s.variables"],"mappings":"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"}

package/components/nested-donut/modules/arc.d.ts

@@ -0,0 +1,17 @@
+import { Selection } from 'd3-selection';
+import { Arc } from 'd3-shape';
+import { NestedDonutSegment } from '../types';
+import { NestedDonutConfig } from '../config';
+declare type AnimState = {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+};
+export interface ArcNode extends SVGElement {
+    _animState?: AnimState;
+}
+export declare function createArc<Datum>(selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, config: NestedDonutConfig<Datum>): void;
+export declare function updateArc<Datum>(selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, config: NestedDonutConfig<Datum>, arcGen: Arc<any, AnimState>, duration: number): void;
+export declare function removeArc<Datum>(selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, duration: number): void;
+export {};

package/components/nested-donut/modules/arc.js

@@ -0,0 +1,50 @@
+import { interpolate } from 'd3-interpolate';
+import { getColor } from '../../../utils/color.js';
+import { smartTransition } from '../../../utils/d3.js';
+
+function createArc(selection, config) {
+    selection
+        .style('fill', d => { var _a; return (_a = getColor(d, config.color)) !== null && _a !== void 0 ? _a : d._state.fill; })
+        .style('opacity', 0)
+        .each((d, i, els) => {
+        const arcNode = els[i];
+        const angleCenter = (d.x0 + d.x1) / 2;
+        const angleHalfWidth = (d.x1 - d.x0) / 2;
+        arcNode._animState = {
+            x0: angleCenter - angleHalfWidth,
+            x1: angleCenter + angleHalfWidth,
+            y0: d.y0,
+            y1: d.y1,
+        };
+    });
+}
+function updateArc(selection, config, arcGen, duration) {
+    selection
+        .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
+        .style('fill', d => { var _a; return (_a = getColor(d, config.color)) !== null && _a !== void 0 ? _a : d._state.fill; });
+    if (duration) {
+        const transition = smartTransition(selection, duration)
+            .style('opacity', 1);
+        transition.attrTween('d', (d, i, els) => {
+            const arcNode = els[i];
+            const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 };
+            const datum = interpolate(arcNode._animState, nextAnimState);
+            return (t) => {
+                arcNode._animState = datum(t);
+                return arcGen(arcNode._animState);
+            };
+        });
+    }
+    else {
+        selection.attr('d', arcGen)
+            .style('opacity', 1);
+    }
+}
+function removeArc(selection, duration) {
+    smartTransition(selection, duration)
+        .style('opacity', 0)
+        .remove();
+}
+
+export { createArc, removeArc, updateArc };
+//# sourceMappingURL=arc.js.map

package/components/nested-donut/modules/arc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arc.js","sources":["../../../../src/components/nested-donut/modules/arc.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolate } from 'd3-interpolate'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { NestedDonutSegment } from '../types'\n\n// Config\nimport { NestedDonutConfig } from '../config'\n\ntype AnimState = { x0: number; x1: number; y0: number; y1: number }\nexport interface ArcNode extends SVGElement {\n  _animState?: AnimState;\n}\n\nexport function createArc<Datum> (\n  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n  config: NestedDonutConfig<Datum>\n): void {\n  selection\n    .style('fill', d => getColor(d, config.color) ?? d._state.fill)\n    .style('opacity', 0)\n    .each((d, i, els) => {\n      const arcNode: ArcNode = els[i]\n      const angleCenter = (d.x0 + d.x1) / 2\n      const angleHalfWidth = (d.x1 - d.x0) / 2\n      arcNode._animState = {\n        x0: angleCenter - angleHalfWidth,\n        x1: angleCenter + angleHalfWidth,\n        y0: d.y0,\n        y1: d.y1,\n      }\n    })\n}\n\nexport function updateArc<Datum> (\n  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n  config: NestedDonutConfig<Datum>,\n  arcGen: Arc<any, AnimState>,\n  duration: number\n): void {\n  selection\n    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables\n    .style('fill', d => getColor(d, config.color) ?? d._state.fill)\n\n  if (duration) {\n    const transition = smartTransition(selection, duration)\n      .style('opacity', 1) as Transition<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, ArcNode>\n\n    transition.attrTween('d', (d, i, els) => {\n      const arcNode: ArcNode = els[i]\n      const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }\n      const datum = interpolate(arcNode._animState, nextAnimState)\n\n      return (t: number): string => {\n        arcNode._animState = datum(t)\n        return arcGen(arcNode._animState)\n      }\n    })\n  } else {\n    selection.attr('d', arcGen)\n      .style('opacity', 1)\n  }\n}\n\nexport function removeArc<Datum> (\n  selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":[],"mappings":"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"}