@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.8

package/components/xy-labels/modules/label.js

@@ -0,0 +1,107 @@
+import { select } from 'd3-selection';
+import { mean } from 'd3-array';
+import { color } from 'd3-color';
+import { smartTransition } from '../../../utils/d3.js';
+import { isStringCSSVariable, getCSSVariableValue, getCSSVariableValueInPixels } from '../../../utils/misc.js';
+import { hexToBrightness, getColor } from '../../../utils/color.js';
+import { getNumber, getString, getValue } from '../../../utils/data.js';
+import { XYLabelPositioning } from '../types.js';
+
+function createLabels(selection) {
+    selection.attr('transform', d => `translate(${d._screen.x},${d._screen.y})`);
+    selection.append('rect').style('fill', d => d._screen.backgroundColor);
+    selection.append('text')
+        .style('text-anchor', 'middle')
+        .style('dominant-baseline', 'central')
+        .style('fill', d => d._screen.backgroundColor)
+        .style('pointer-events', 'none');
+    selection.attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(0)`);
+}
+function updateLabels(selection, config, duration) {
+    selection.each((d, i, elements) => {
+        var _a, _b;
+        const group = select(elements[i]);
+        const text = group.select('text');
+        const rect = group.select('rect');
+        const backgroundColor = d._screen.backgroundColor;
+        const labelText = (_a = d._screen.labelText) !== null && _a !== void 0 ? _a : '';
+        const labelFontSize = d._screen.fontSize;
+        let labelColor = d._screen.labelColor;
+        // Label background
+        const backgroundHeight = labelFontSize * 1.7;
+        let backgroundWidth = labelFontSize * labelText.length * 0.7;
+        if (backgroundWidth < backgroundHeight)
+            backgroundWidth = backgroundHeight;
+        smartTransition(rect, duration)
+            .attr('width', backgroundWidth)
+            .attr('height', backgroundHeight)
+            .attr('x', -backgroundWidth / 2)
+            .attr('y', -backgroundHeight / 2)
+            .attr('rx', labelFontSize)
+            .attr('ry', labelFontSize)
+            .style('fill', backgroundColor);
+        // Label
+        if (!labelColor) {
+            const hex = (_b = color(isStringCSSVariable(backgroundColor) ? getCSSVariableValue(backgroundColor, group.node()) : backgroundColor)) === null || _b === void 0 ? void 0 : _b.hex();
+            const brightness = hexToBrightness(hex);
+            labelColor = brightness > config.labelTextBrightnessRatio
+                ? 'var(--vis-xy-label-text-color-dark)'
+                : 'var(--vis-xy-label-text-color-light)';
+        }
+        text.html(labelText)
+            .attr('font-size', labelFontSize);
+        smartTransition(text, duration)
+            .style('fill', labelColor);
+        rect.style('cursor', d._screen.cursor);
+    });
+    smartTransition(selection, duration)
+        .attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(1)`);
+}
+function removeLabels(selection, duration) {
+    smartTransition(selection, duration)
+        .attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(0)`)
+        .remove();
+}
+function getLabelPosition(value, positioning, scale) {
+    var _a;
+    switch (positioning) {
+        case XYLabelPositioning.DataSpace: return (_a = scale(value)) !== null && _a !== void 0 ? _a : 0;
+        case XYLabelPositioning.AbsolutePx: return value;
+        case XYLabelPositioning.AbsolutePercentage: {
+            const scaleRange = scale.range();
+            return scaleRange[0] + (scaleRange[1] - scaleRange[0]) * value / 100;
+        }
+    }
+}
+function getLabelRenderProps(data, el, config, xScale, yScale) {
+    var _a, _b;
+    const isCluster = Array.isArray(data);
+    const fontSize = isCluster
+        ? ((_a = getNumber(data, config.clusterFontSize)) !== null && _a !== void 0 ? _a : getCSSVariableValueInPixels('var(--vis-xy-label-cluster-font-size)', el))
+        : ((_b = getNumber(data, config.labelFontSize)) !== null && _b !== void 0 ? _b : getCSSVariableValueInPixels('var(--vis-xy-label-font-size)', el));
+    const labelText = (isCluster ? config.clusterLabel(data) : getString(data, config.label)) || '';
+    const backgroundHeight = fontSize * 1.7;
+    let backgroundWidth = fontSize * labelText.length * 0.7;
+    if (backgroundWidth < backgroundHeight)
+        backgroundWidth = backgroundHeight;
+    const x = isCluster
+        ? mean(data, d => d._screen.x)
+        : getLabelPosition(getNumber(data, config.x), getValue(data, config.xPositioning), xScale);
+    const y = isCluster
+        ? mean(data, d => d._screen.y)
+        : getLabelPosition(getNumber(data, config.y), getValue(data, config.yPositioning), yScale);
+    return {
+        x,
+        y,
+        fontSize,
+        labelText,
+        labelColor: isCluster ? getColor(data, config.clusterLabelColor) : getColor(data, config.color),
+        backgroundColor: isCluster ? getColor(data, config.clusterBackgroundColor) : getColor(data, config.backgroundColor),
+        cursor: isCluster ? getString(data, config.clusterCursor) : getString(data, config.cursor),
+        width: backgroundWidth,
+        height: backgroundHeight,
+    };
+}
+
+export { createLabels, getLabelPosition, getLabelRenderProps, removeLabels, updateLabels };
+//# sourceMappingURL=label.js.map

package/components/xy-labels/modules/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../../src/components/xy-labels/modules/label.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { mean } from 'd3-array'\nimport { color } from 'd3-color'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValueInPixels, getCSSVariableValue, isStringCSSVariable } from 'utils/misc'\nimport { getColor, hexToBrightness } from 'utils/color'\nimport { getNumber, getString, getValue } from 'utils/data'\n\n// Types\nimport { ContinuousScale } from 'types/scale'\n\n// Config\nimport { XYLabelsConfig } from '../config'\n\n// Local Types\nimport { XYLabel, XYLabelCluster, XYLabelPositioning, XYLabelRenderProps } from '../types'\n\nexport function createLabels<Datum> (\n  selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>\n): void {\n  selection.attr('transform', d => `translate(${d._screen.x},${d._screen.y})`)\n  selection.append('rect').style('fill', d => d._screen.backgroundColor)\n  selection.append('text')\n    .style('text-anchor', 'middle')\n    .style('dominant-baseline', 'central')\n    .style('fill', d => d._screen.backgroundColor)\n    .style('pointer-events', 'none')\n\n  selection.attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(0)`)\n}\n\nexport function updateLabels<Datum> (\n  selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>,\n  config: XYLabelsConfig<Datum>,\n  duration: number\n): void {\n  selection.each((d, i, elements) => {\n    const group: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any> = select(elements[i])\n    const text = group.select('text')\n    const rect = group.select('rect')\n\n    const backgroundColor = d._screen.backgroundColor\n    const labelText = d._screen.labelText ?? ''\n    const labelFontSize = d._screen.fontSize\n    let labelColor = d._screen.labelColor\n\n    // Label background\n    const backgroundHeight = labelFontSize * 1.7\n    let backgroundWidth = labelFontSize * labelText.length * 0.7\n    if (backgroundWidth < backgroundHeight) backgroundWidth = backgroundHeight\n    smartTransition(rect, duration)\n      .attr('width', backgroundWidth)\n      .attr('height', backgroundHeight)\n      .attr('x', -backgroundWidth / 2)\n      .attr('y', -backgroundHeight / 2)\n      .attr('rx', labelFontSize)\n      .attr('ry', labelFontSize)\n      .style('fill', backgroundColor)\n\n    // Label\n    if (!labelColor) {\n      const hex = color(isStringCSSVariable(backgroundColor) ? getCSSVariableValue(backgroundColor, group.node()) : backgroundColor)?.hex()\n      const brightness = hexToBrightness(hex)\n      labelColor = brightness > config.labelTextBrightnessRatio\n        ? 'var(--vis-xy-label-text-color-dark)'\n        : 'var(--vis-xy-label-text-color-light)'\n    }\n\n    text.html(labelText)\n      .attr('font-size', labelFontSize)\n\n    smartTransition(text, duration)\n      .style('fill', labelColor)\n\n    rect.style('cursor', d._screen.cursor)\n  })\n\n  smartTransition(selection, duration)\n    .attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(1)`)\n}\n\nexport function removeLabels<Datum> (\n  selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(0)`)\n    .remove()\n}\n\nexport function getLabelPosition (value: number, positioning: XYLabelPositioning, scale: ContinuousScale): number {\n  switch (positioning) {\n    case XYLabelPositioning.DataSpace: return scale(value) ?? 0\n    case XYLabelPositioning.AbsolutePx: return value\n    case XYLabelPositioning.AbsolutePercentage: {\n      const scaleRange = scale.range()\n      return scaleRange[0] + (scaleRange[1] - scaleRange[0]) * value / 100\n    }\n  }\n}\n\nexport function getLabelRenderProps<Datum> (\n  data: Datum | XYLabel<Datum>[],\n  el: SVGGraphicsElement,\n  config: XYLabelsConfig<Datum>,\n  xScale: ContinuousScale,\n  yScale: ContinuousScale\n): XYLabelRenderProps {\n  const isCluster = Array.isArray(data)\n  const fontSize = isCluster\n    ? (getNumber(data, config.clusterFontSize) ?? getCSSVariableValueInPixels('var(--vis-xy-label-cluster-font-size)', el))\n    : (getNumber(data, config.labelFontSize) ?? getCSSVariableValueInPixels('var(--vis-xy-label-font-size)', el))\n\n  const labelText = (isCluster ? config.clusterLabel(data as XYLabel<Datum>[]) : getString(data, config.label)) || ''\n  const backgroundHeight = fontSize * 1.7\n  let backgroundWidth = fontSize * labelText.length * 0.7\n  if (backgroundWidth < backgroundHeight) backgroundWidth = backgroundHeight\n\n  const x = isCluster\n    ? mean(data as XYLabel<Datum>[], d => d._screen.x)\n    : getLabelPosition(getNumber(data, config.x), getValue(data, config.xPositioning), xScale)\n\n  const y = isCluster\n    ? mean(data as XYLabel<Datum>[], d => d._screen.y)\n    : getLabelPosition(getNumber(data, config.y), getValue(data, config.yPositioning), yScale)\n\n  return {\n    x,\n    y,\n    fontSize,\n    labelText,\n    labelColor: isCluster ? getColor(data, config.clusterLabelColor) : getColor(data, config.color),\n    backgroundColor: isCluster ? getColor(data, config.clusterBackgroundColor) : getColor(data, config.backgroundColor),\n    cursor: isCluster ? getString(data, config.clusterCursor) : getString(data, config.cursor),\n    width: backgroundWidth,\n    height: backgroundHeight,\n  }\n}\n"],"names":[],"mappings":"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"}

package/components/xy-labels/style.d.ts

@@ -0,0 +1,5 @@
+export declare const globalStyles: void;
+export declare const root: string;
+export declare const labelGroup: string;
+export declare const cluster: string;
+export declare const label: string;

package/{src/components/xy-labels/style.ts → components/xy-labels/style.js}

@@ -1,6 +1,6 @@
-import { css, injectGlobal } from '@emotion/css'
+import { injectGlobal, css } from '@emotion/css';
 
-export const globalStyles = injectGlobal`
+const globalStyles = injectGlobal `
   :root {
     --vis-xy-label-cursor: default;
     // Undefined by default to allow proper fallback to var(--vis-color-main)
@@ -17,13 +17,11 @@ export const globalStyles = injectGlobal`
     --vis-xy-label-text-color-light: #fff;
     --vis-xy-label-text-font-weight: 500;
   }
-`
-
-export const root = css`
+`;
+const root = css `
   label: xy-labels-component;
-`
-
-export const labelGroup = css`
+`;
+const labelGroup = css `
   label: label-g;
 
   > rect, text {
@@ -46,12 +44,13 @@ export const labelGroup = css`
         stroke-width: var(--vis-xy-label-hover-stroke-width);
     }
   }
-`
-
-export const cluster = css`
+`;
+const cluster = css `
   label: cluster;
-`
-
-export const label = css`
+`;
+const label = css `
   label: label;
-`
+`;
+
+export { cluster, globalStyles, label, labelGroup, root };
+//# sourceMappingURL=style.js.map

package/components/xy-labels/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/xy-labels/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-xy-label-cursor: default;\n    // Undefined by default to allow proper fallback to var(--vis-color-main)\n    /* --vis-xy-label-fill-color */\n    --vis-xy-label-stroke-color: none;\n    --vis-xy-label-stroke-width: 0px;\n    --vis-xy-label-fill-opacity: 1;\n    --vis-xy-label-stroke-opacity: 1;\n    --vis-xy-label-hover-stroke-width: 1px;\n    --vis-xy-label-font-size: 12px;\n    --vis-xy-label-cluster-font-size: 14px;\n\n    --vis-xy-label-text-color-dark: #5b5f6d;\n    --vis-xy-label-text-color-light: #fff;\n    --vis-xy-label-text-font-weight: 500;\n  }\n`\n\nexport const root = css`\n  label: xy-labels-component;\n`\n\nexport const labelGroup = css`\n  label: label-g;\n\n  > rect, text {\n    cursor: var(--vis-xy-label-cursor);\n    fill: var(--vis-xy-label-fill-color, var(--vis-color-main));\n    fill-opacity: var(--vis-xy-label-fill-opacity);\n    stroke-opacity: var(--vis-xy-label-stroke-opacity);\n  }\n\n  > text {\n    font-weight: var(--vis-xy-label-text-font-weight);\n    user-select: none;\n  }\n\n  > rect {\n    stroke-width: var(--vis-xy-label-stroke-width);\n    stroke: var(--vis-xy-label-stroke-color);\n\n    &:hover {\n        stroke-width: var(--vis-xy-label-hover-stroke-width);\n    }\n  }\n`\n\nexport const cluster = css`\n  label: cluster;\n`\n\nexport const label = css`\n  label: label;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuB5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;EAEzB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/components/xy-labels/types.d.ts

@@ -0,0 +1,23 @@
+export declare type XYLabelRenderProps = {
+    x: number;
+    y: number;
+    fontSize: number;
+    backgroundColor: string | null;
+    labelText: string | null;
+    labelColor: string | null;
+    cursor: string | null;
+    width: number;
+    height: number;
+};
+export declare type XYLabel<D> = D & {
+    _screen: XYLabelRenderProps;
+};
+export declare type XYLabelCluster<D> = {
+    _screen: XYLabelRenderProps;
+    records: XYLabel<D>[];
+};
+export declare enum XYLabelPositioning {
+    AbsolutePx = "absolute_px",
+    AbsolutePercentage = "absolute_percentage",
+    DataSpace = "data_space"
+}

package/components/xy-labels/types.js

@@ -0,0 +1,9 @@
+var XYLabelPositioning;
+(function (XYLabelPositioning) {
+    XYLabelPositioning["AbsolutePx"] = "absolute_px";
+    XYLabelPositioning["AbsolutePercentage"] = "absolute_percentage";
+    XYLabelPositioning["DataSpace"] = "data_space";
+})(XYLabelPositioning || (XYLabelPositioning = {}));
+
+export { XYLabelPositioning };
+//# sourceMappingURL=types.js.map

package/components/xy-labels/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/xy-labels/types.ts"],"sourcesContent":["export type XYLabelRenderProps = {\n  x: number;\n  y: number;\n  fontSize: number;\n  backgroundColor: string | null;\n  labelText: string | null;\n  labelColor: string | null;\n  cursor: string | null;\n  width: number;\n  height: number;\n}\n\nexport type XYLabel<D> = D & {\n  _screen: XYLabelRenderProps;\n}\n\nexport type XYLabelCluster<D> = {\n  _screen: XYLabelRenderProps;\n  records: XYLabel<D>[];\n}\n\nexport enum XYLabelPositioning {\n  AbsolutePx = 'absolute_px',\n  AbsolutePercentage = 'absolute_percentage',\n  DataSpace = 'data_space',\n}\n"],"names":[],"mappings":"IAqBY,mBAIX;AAJD,CAAA,UAAY,kBAAkB,EAAA;AAC5B,IAAA,kBAAA,CAAA,YAAA,CAAA,GAAA,aAA0B,CAAA;AAC1B,IAAA,kBAAA,CAAA,oBAAA,CAAA,GAAA,qBAA0C,CAAA;AAC1C,IAAA,kBAAA,CAAA,WAAA,CAAA,GAAA,YAAwB,CAAA;AAC1B,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,GAI7B,EAAA,CAAA,CAAA;;;;"}

package/components.d.ts

@@ -0,0 +1,51 @@
+export { ComponentCore } from "./core/component";
+export { ComponentConfigInterface } from "./core/component/config";
+export { XYComponentCore } from "./core/xy-component";
+export { XYComponentConfigInterface } from "./core/xy-component/config";
+export { Tooltip } from "./components/tooltip";
+export { Line } from './components/line';
+export { StackedBar } from './components/stacked-bar';
+export { GroupedBar } from './components/grouped-bar';
+export { Axis } from './components/axis';
+export { Scatter } from './components/scatter';
+export { Brush } from './components/brush';
+export { BulletLegend } from './components/bullet-legend';
+export { FlowLegend } from './components/flow-legend';
+export { Crosshair } from './components/crosshair';
+export { Timeline } from './components/timeline';
+export { Sankey } from './components/sankey';
+export { Area } from './components/area';
+export { TopoJSONMap } from './components/topojson-map';
+export { LeafletMap } from './components/leaflet-map';
+export { MapLibreArcticDark, MapLibreArcticLight } from './components/leaflet-map/renderer/map-style';
+export { LeafletFlowMap } from './components/leaflet-flow-map';
+export { ChordDiagram } from './components/chord-diagram';
+export { Graph } from './components/graph';
+export { VisControls } from './components/vis-controls';
+export { Donut } from './components/donut';
+export { FreeBrush } from './components/free-brush';
+export { XYLabels } from './components/xy-labels';
+export { NestedDonut } from './components/nested-donut';
+export type { LineConfigInterface } from './components/line/config';
+export type { StackedBarConfigInterface } from './components/stacked-bar/config';
+export type { GroupedBarConfigInterface } from './components/grouped-bar/config';
+export type { ScatterConfigInterface } from './components/scatter/config';
+export type { TooltipConfigInterface } from './components/tooltip/config';
+export type { BrushConfigInterface } from './components/brush/config';
+export type { AxisConfigInterface } from './components/axis/config';
+export type { BulletLegendConfigInterface } from './components/bullet-legend/config';
+export type { FlowLegendConfigInterface } from './components/flow-legend/config';
+export type { CrosshairConfigInterface } from './components/crosshair/config';
+export type { TimelineConfigInterface } from './components/timeline/config';
+export type { SankeyConfigInterface } from './components/sankey/config';
+export type { AreaConfigInterface } from './components/area/config';
+export type { TopoJSONMapConfigInterface } from './components/topojson-map/config';
+export type { LeafletMapConfigInterface } from './components/leaflet-map/config';
+export type { LeafletFlowMapConfigInterface } from './components/leaflet-flow-map/config';
+export type { ChordDiagramConfigInterface } from './components/chord-diagram/config';
+export type { GraphConfigInterface } from './components/graph/config';
+export type { VisControlsConfigInterface } from './components/vis-controls/config';
+export type { DonutConfigInterface } from './components/donut/config';
+export type { FreeBrushConfigInterface } from './components/free-brush/config';
+export type { XYLabelsConfigInterface } from './components/xy-labels/config';
+export type { NestedDonutConfigInterface } from './components/nested-donut/config';

package/components.js

@@ -0,0 +1,29 @@
+export { ComponentCore } from './core/component/index.js';
+export { XYComponentCore } from './core/xy-component/index.js';
+export { Tooltip } from './components/tooltip/index.js';
+export { Line } from './components/line/index.js';
+export { StackedBar } from './components/stacked-bar/index.js';
+export { GroupedBar } from './components/grouped-bar/index.js';
+export { Axis } from './components/axis/index.js';
+export { Scatter } from './components/scatter/index.js';
+export { Brush } from './components/brush/index.js';
+export { BulletLegend } from './components/bullet-legend/index.js';
+export { FlowLegend } from './components/flow-legend/index.js';
+export { Crosshair } from './components/crosshair/index.js';
+export { Timeline } from './components/timeline/index.js';
+export { Sankey } from './components/sankey/index.js';
+export { Area } from './components/area/index.js';
+export { TopoJSONMap } from './components/topojson-map/index.js';
+export { LeafletMap } from './components/leaflet-map/index.js';
+export { MapLibreArcticDark, MapLibreArcticLight } from './components/leaflet-map/renderer/map-style.js';
+export { LeafletFlowMap } from './components/leaflet-flow-map/index.js';
+export { ChordDiagram } from './components/chord-diagram/index.js';
+export { Graph } from './components/graph/index.js';
+export { VisControls } from './components/vis-controls/index.js';
+export { Donut } from './components/donut/index.js';
+export { FreeBrush } from './components/free-brush/index.js';
+export { XYLabels } from './components/xy-labels/index.js';
+export { NestedDonut } from './components/nested-donut/index.js';
+
+// Core
+//# sourceMappingURL=components.js.map

package/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":["../src/components.ts"],"sourcesContent":["// Core\nexport { ComponentCore } from 'core/component'\nexport type { ComponentConfigInterface } from 'core/component/config'\nexport { XYComponentCore } from 'core/xy-component'\nexport type { XYComponentConfigInterface } from 'core/xy-component/config'\n\n// Components\nexport { Tooltip } from 'components/tooltip'\nexport { Line } from './components/line'\nexport { StackedBar } from './components/stacked-bar'\nexport { GroupedBar } from './components/grouped-bar'\nexport { Axis } from './components/axis'\nexport { Scatter } from './components/scatter'\nexport { Brush } from './components/brush'\nexport { BulletLegend } from './components/bullet-legend'\nexport { FlowLegend } from './components/flow-legend'\nexport { Crosshair } from './components/crosshair'\nexport { Timeline } from './components/timeline'\nexport { Sankey } from './components/sankey'\nexport { Area } from './components/area'\nexport { TopoJSONMap } from './components/topojson-map'\nexport { LeafletMap } from './components/leaflet-map'\nexport { MapLibreArcticDark, MapLibreArcticLight } from './components/leaflet-map/renderer/map-style'\nexport { LeafletFlowMap } from './components/leaflet-flow-map'\nexport { ChordDiagram } from './components/chord-diagram'\nexport { Graph } from './components/graph'\nexport { VisControls } from './components/vis-controls'\nexport { Donut } from './components/donut'\nexport { FreeBrush } from './components/free-brush'\nexport { XYLabels } from './components/xy-labels'\nexport { NestedDonut } from './components/nested-donut'\n\n// Config Interfaces\nexport type { LineConfigInterface } from './components/line/config'\nexport type { StackedBarConfigInterface } from './components/stacked-bar/config'\nexport type { GroupedBarConfigInterface } from './components/grouped-bar/config'\nexport type { ScatterConfigInterface } from './components/scatter/config'\nexport type { TooltipConfigInterface } from './components/tooltip/config'\nexport type { BrushConfigInterface } from './components/brush/config'\nexport type { AxisConfigInterface } from './components/axis/config'\nexport type { BulletLegendConfigInterface } from './components/bullet-legend/config'\nexport type { FlowLegendConfigInterface } from './components/flow-legend/config'\nexport type { CrosshairConfigInterface } from './components/crosshair/config'\nexport type { TimelineConfigInterface } from './components/timeline/config'\nexport type { SankeyConfigInterface } from './components/sankey/config'\nexport type { AreaConfigInterface } from './components/area/config'\nexport type { TopoJSONMapConfigInterface } from './components/topojson-map/config'\nexport type { LeafletMapConfigInterface } from './components/leaflet-map/config'\nexport type { LeafletFlowMapConfigInterface } from './components/leaflet-flow-map/config'\nexport type { ChordDiagramConfigInterface } from './components/chord-diagram/config'\nexport type { GraphConfigInterface } from './components/graph/config'\nexport type { VisControlsConfigInterface } from './components/vis-controls/config'\nexport type { DonutConfigInterface } from './components/donut/config'\nexport type { FreeBrushConfigInterface } from './components/free-brush/config'\nexport type { XYLabelsConfigInterface } from './components/xy-labels/config'\nexport type { NestedDonutConfigInterface } from './components/nested-donut/config'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}

package/containers/single-container/config.d.ts

@@ -0,0 +1,12 @@
+import { ContainerConfig, ContainerConfigInterface } from "../../core/container/config";
+import { ComponentCore } from "../../core/component";
+import { Tooltip } from "../../components/tooltip";
+export interface SingleContainerConfigInterface<Datum> extends ContainerConfigInterface {
+    /** Visualization component. Default: `undefined` */
+    component?: ComponentCore<Datum>;
+    /** Tooltip component. Default: `undefined` */
+    tooltip?: Tooltip;
+}
+export declare class SingleContainerConfig<Datum> extends ContainerConfig implements SingleContainerConfigInterface<Datum> {
+    tooltip: any;
+}

package/containers/single-container/config.js

@@ -0,0 +1,12 @@
+import { ContainerConfig } from '../../core/container/config.js';
+
+// Core
+class SingleContainerConfig extends ContainerConfig {
+    constructor() {
+        super(...arguments);
+        this.tooltip = undefined;
+    }
+}
+
+export { SingleContainerConfig };
+//# sourceMappingURL=config.js.map

package/containers/single-container/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/containers/single-container/config.ts"],"sourcesContent":["// Core\nimport { ContainerConfig, ContainerConfigInterface } from 'core/container/config'\nimport { ComponentCore } from 'core/component'\nimport { Tooltip } from 'components/tooltip'\n\nexport interface SingleContainerConfigInterface<Datum> extends ContainerConfigInterface {\n  /** Visualization component. Default: `undefined` */\n  component?: ComponentCore<Datum>;\n  /** Tooltip component. Default: `undefined` */\n  tooltip?: Tooltip;\n}\n\nexport class SingleContainerConfig<Datum> extends ContainerConfig implements SingleContainerConfigInterface<Datum> {\n  tooltip = undefined\n}\n"],"names":[],"mappings":";;AAAA;AAYM,MAAO,qBAA6B,SAAQ,eAAe,CAAA;AAAjE,IAAA,WAAA,GAAA;;QACE,IAAO,CAAA,OAAA,GAAG,SAAS,CAAA;KACpB;AAAA;;;;"}

package/containers/single-container/index.d.ts

@@ -0,0 +1,19 @@
+import "../../styles/index";
+import { ContainerCore } from "../../core/container";
+import { ComponentCore } from "../../core/component";
+import { ComponentConfigInterface } from "../../core/component/config";
+import { SingleContainerConfig, SingleContainerConfigInterface } from './config';
+export declare class SingleContainer<Data> extends ContainerCore {
+    component: ComponentCore<Data>;
+    config: SingleContainerConfig<Data>;
+    constructor(element: HTMLElement, config?: SingleContainerConfigInterface<Data>, data?: Data);
+    setData(data: Data, preventRender?: boolean): void;
+    updateContainer(containerConfig: SingleContainerConfigInterface<Data>, preventRender?: boolean): void;
+    updateComponent(componentConfig: ComponentConfigInterface, preventRender?: boolean): void;
+    update(containerConfig: SingleContainerConfigInterface<Data>, componentConfig?: ComponentConfigInterface, data?: Data): void;
+    getFitWidthScale(): number;
+    _render(duration?: number): void;
+    render(duration?: any): void;
+    _onResize(): void;
+    destroy(): void;
+}

package/containers/single-container/index.js

@@ -0,0 +1,128 @@
+import '../../styles/index.js';
+import { ContainerCore } from '../../core/container/index.js';
+import { smartTransition } from '../../utils/d3.js';
+import { Sizing } from '../../types/component.js';
+import { SingleContainerConfig } from './config.js';
+
+// Global CSS variables (side effects import)
+class SingleContainer extends ContainerCore {
+    constructor(element, config, data) {
+        var _a;
+        super(element);
+        this.config = new SingleContainerConfig();
+        if (config) {
+            this.updateContainer(config, true);
+            this.component = config.component;
+        }
+        if (data) {
+            this.setData(data, true);
+        }
+        // Render if component exists and has data
+        if ((_a = this.component) === null || _a === void 0 ? void 0 : _a.datamodel.data)
+            this.render();
+    }
+    setData(data, preventRender) {
+        var _a;
+        const { config } = this;
+        if (this.component)
+            this.component.setData(data);
+        if (!preventRender)
+            this.render();
+        (_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    updateContainer(containerConfig, preventRender) {
+        super.updateContainer(containerConfig);
+        this.removeAllChildren();
+        this.component = containerConfig.component;
+        if (containerConfig.sizing)
+            this.component.sizing = containerConfig.sizing;
+        this.element.appendChild(this.component.element);
+        const tooltip = containerConfig.tooltip;
+        if (tooltip) {
+            if (!tooltip.hasContainer())
+                tooltip.setContainer(this._container);
+            tooltip.setComponents([this.component]);
+        }
+        if (!preventRender)
+            this.render();
+    }
+    updateComponent(componentConfig, preventRender) {
+        this.component.setConfig(componentConfig);
+        if (!preventRender)
+            this.render();
+    }
+    update(containerConfig, componentConfig, data) {
+        if (containerConfig)
+            this.updateContainer(containerConfig, true);
+        if (componentConfig)
+            this.updateComponent(componentConfig, true);
+        if (data)
+            this.setData(data, true);
+        this.render();
+    }
+    getFitWidthScale() {
+        const { config, component } = this;
+        const extendedSizeComponent = component;
+        if (!extendedSizeComponent.getWidth)
+            return 1;
+        const componentWidth = extendedSizeComponent.getWidth() + config.margin.left + config.margin.right;
+        return this.width / componentWidth;
+    }
+    _render(duration) {
+        const { config, component } = this;
+        super._render(duration);
+        component.setSize(this.width, this.height, this.containerWidth, this.containerHeight);
+        component.g.attr('transform', `translate(${config.margin.left},${config.margin.top})`);
+        component.render(duration);
+        if (config.tooltip)
+            config.tooltip.update();
+    }
+    // Re-defining the `render()` function to handle different sizing techniques (`Sizing.Extend` and `Sizing.FitWidth`)
+    // Not calling `super.render()` because we don't want it to interfere with setting the SVG size here.
+    render(duration = this.config.duration) {
+        const { config, component } = this;
+        if (config.sizing === Sizing.Extend || config.sizing === Sizing.FitWidth) {
+            const fitToWidth = config.sizing === Sizing.FitWidth;
+            const extendedSizeComponent = component;
+            const componentWidth = extendedSizeComponent.getWidth() + config.margin.left + config.margin.right;
+            const componentHeight = extendedSizeComponent.getHeight() + config.margin.top + config.margin.bottom;
+            const scale = fitToWidth ? this.getFitWidthScale() : 1;
+            const currentWidth = this.svg.attr('width');
+            const currentHeight = this.svg.attr('height');
+            const scaledWidth = componentWidth * scale;
+            const scaledHeight = componentHeight * scale;
+            const animated = currentWidth || currentHeight;
+            smartTransition(this.svg, animated ? duration : 0)
+                .attr('width', scaledWidth)
+                .attr('height', scaledHeight)
+                .attr('viewBox', `${0} ${0} ${componentWidth} ${fitToWidth ? scaledHeight : componentHeight}`)
+                .attr('preserveAspectRatio', 'xMinYMin');
+        }
+        else {
+            this.svg
+                .attr('width', this.config.width || this.containerWidth)
+                .attr('height', this.config.height || this.containerHeight);
+        }
+        // Schedule the actual rendering in the next frame
+        cancelAnimationFrame(this._requestedAnimationFrame);
+        this._requestedAnimationFrame = requestAnimationFrame(() => {
+            this._render(duration);
+        });
+    }
+    _onResize() {
+        var _a;
+        const { config } = this;
+        super._onResize();
+        (_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    destroy() {
+        var _a;
+        const { component, config } = this;
+        super.destroy();
+        component === null || component === void 0 ? void 0 : component.destroy();
+        (_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+}
+
+export { SingleContainer };
+//# sourceMappingURL=index.js.map

package/containers/single-container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/containers/single-container/index.ts"],"sourcesContent":["// Global CSS variables (side effects import)\nimport 'styles/index'\n\n// Core\nimport { ContainerCore } from 'core/container'\nimport { ComponentCore } from 'core/component'\nimport { ComponentConfigInterface } from 'core/component/config'\n\n// Utils\nimport { smartTransition } from 'utils/d3'\n\n// Types\nimport { Sizing, ExtendedSizeComponent } from 'types/component'\n\n// Config\nimport { SingleContainerConfig, SingleContainerConfigInterface } from './config'\n\nexport class SingleContainer<Data> extends ContainerCore {\n  component: ComponentCore<Data>\n  config: SingleContainerConfig<Data> = new SingleContainerConfig()\n\n  constructor (element: HTMLElement, config?: SingleContainerConfigInterface<Data>, data?: Data) {\n    super(element)\n\n    if (config) {\n      this.updateContainer(config, true)\n      this.component = config.component\n    }\n\n    if (data) {\n      this.setData(data, true)\n    }\n\n    // Render if component exists and has data\n    if (this.component?.datamodel.data) this.render()\n  }\n\n  public setData (data: Data, preventRender?: boolean): void {\n    const { config } = this\n\n    if (this.component) this.component.setData(data)\n    if (!preventRender) this.render()\n    config.tooltip?.hide()\n  }\n\n  public updateContainer (containerConfig: SingleContainerConfigInterface<Data>, preventRender?: boolean): void {\n    super.updateContainer(containerConfig)\n    this.removeAllChildren()\n\n    this.component = containerConfig.component\n    if (containerConfig.sizing) this.component.sizing = containerConfig.sizing\n    this.element.appendChild(this.component.element)\n\n    const tooltip = containerConfig.tooltip\n    if (tooltip) {\n      if (!tooltip.hasContainer()) tooltip.setContainer(this._container)\n      tooltip.setComponents([this.component])\n    }\n\n    if (!preventRender) this.render()\n  }\n\n  public updateComponent (componentConfig: ComponentConfigInterface, preventRender?: boolean): void {\n    this.component.setConfig(componentConfig)\n    if (!preventRender) this.render()\n  }\n\n  public update (\n    containerConfig: SingleContainerConfigInterface<Data>,\n    componentConfig?: ComponentConfigInterface,\n    data?: Data\n  ): void {\n    if (containerConfig) this.updateContainer(containerConfig, true)\n    if (componentConfig) this.updateComponent(componentConfig, true)\n    if (data) this.setData(data, true)\n    this.render()\n  }\n\n  public getFitWidthScale (): number {\n    const { config, component } = this\n\n    const extendedSizeComponent = component as ExtendedSizeComponent\n    if (!extendedSizeComponent.getWidth) return 1\n\n    const componentWidth = extendedSizeComponent.getWidth() + config.margin.left + config.margin.right\n    return this.width / componentWidth\n  }\n\n  _render (duration?: number): void {\n    const { config, component } = this\n    super._render(duration)\n\n    component.setSize(this.width, this.height, this.containerWidth, this.containerHeight)\n    component.g.attr('transform', `translate(${config.margin.left},${config.margin.top})`)\n    component.render(duration)\n\n    if (config.tooltip) config.tooltip.update()\n  }\n\n  // Re-defining the `render()` function to handle different sizing techniques (`Sizing.Extend` and `Sizing.FitWidth`)\n  // Not calling `super.render()` because we don't want it to interfere with setting the SVG size here.\n  render (duration = this.config.duration): void {\n    const { config, component } = this\n\n    if (config.sizing === Sizing.Extend || config.sizing === Sizing.FitWidth) {\n      const fitToWidth = config.sizing === Sizing.FitWidth\n      const extendedSizeComponent = component as ExtendedSizeComponent\n\n      const componentWidth = extendedSizeComponent.getWidth() + config.margin.left + config.margin.right\n      const componentHeight = extendedSizeComponent.getHeight() + config.margin.top + config.margin.bottom\n      const scale = fitToWidth ? this.getFitWidthScale() : 1\n\n      const currentWidth = this.svg.attr('width')\n      const currentHeight = this.svg.attr('height')\n      const scaledWidth = componentWidth * scale\n      const scaledHeight = componentHeight * scale\n      const animated = currentWidth || currentHeight\n\n      smartTransition(this.svg, animated ? duration : 0)\n        .attr('width', scaledWidth)\n        .attr('height', scaledHeight)\n        .attr('viewBox', `${0} ${0} ${componentWidth} ${fitToWidth ? scaledHeight : componentHeight}`)\n        .attr('preserveAspectRatio', 'xMinYMin')\n    } else {\n      this.svg\n        .attr('width', this.config.width || this.containerWidth)\n        .attr('height', this.config.height || this.containerHeight)\n    }\n\n    // Schedule the actual rendering in the next frame\n    cancelAnimationFrame(this._requestedAnimationFrame)\n    this._requestedAnimationFrame = requestAnimationFrame(() => {\n      this._render(duration)\n    })\n  }\n\n  _onResize (): void {\n    const { config } = this\n    super._onResize()\n    config.tooltip?.hide()\n  }\n\n  public destroy (): void {\n    const { component, config } = this\n    super.destroy()\n\n    component?.destroy()\n    config.tooltip?.destroy()\n  }\n}\n"],"names":[],"mappings":"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"}

package/containers/xy-container/config.d.ts

@@ -0,0 +1,99 @@
+import { XYComponentCore } from "../../core/xy-component";
+import { ContainerConfig, ContainerConfigInterface } from "../../core/container/config";
+import { Tooltip } from "../../components/tooltip";
+import { Axis } from "../../components/axis";
+import { Crosshair } from "../../components/crosshair";
+import { ContinuousScale } from "../../types/scale";
+import { Direction } from "../../types/direction";
+export interface XYContainerConfigInterface<Datum> extends ContainerConfigInterface {
+    /** An array of visualization components. Default: `[]` */
+    components?: XYComponentCore<Datum>[];
+    /** Scale for X dimension, e.g. Scale.scaleLinear().
+     * If set, this value will override the components' xScale and they will have a single shared xScale instance.
+     * By default the components have their own scale instances but their `domain` and `range` values are synchronized.
+     * Default: `undefined` */
+    xScale?: ContinuousScale;
+    /** Scale domain (data extent) for X dimension. By default this value is calculated automatically based on data. */
+    xDomain?: [number | undefined, number | undefined];
+    /** Constraint the minimum value of the X scale domain. Useful when the data is plotted along the X axis.
+     * For example, imagine that you have a chart with dynamic data that has negative values. When values are small
+     * (let's say in the range of [-0.01, 0]), you might still want the chart to display some meaningful value range (e.g. [-1, 0]). That can
+     * be achieved by setting `xDomainMinConstraint` to `[undefined, -1]`. In addition to that, if you want to cut off the
+     * values that are too low (let's say lower than -100), you can set the constraint to `[-100, -1]`
+     * Default: `undefined` */
+    xDomainMinConstraint?: [number | undefined, number | undefined];
+    /** Constraint the minimum value of the X scale domain. Useful when the data is plotted along the X axis.
+     * For example, imagine that you have a chart with dynamic data. When values are small
+     * (let's say < 0.01), you might still want the chart to display some meaningful value range (e.g. [0, 1]). That can
+     * be achieved by setting `xDomainMaxConstraint` to `[1, undefined]`. In addition to that, if you want to cut off the
+     * values that are too high (let's say higher than 100), you can set the constraint to `[1, 100]`
+     * Default: `undefined` */
+    xDomainMaxConstraint?: [number | undefined, number | undefined];
+    /** Force set the X scale range (in the screen space). By default the range is calculated automatically based on the
+     * chart's set up */
+    xRange?: [number, number];
+    /** Scale for Y dimension, e.g. Scale.scaleLinear().
+     * If set, this value will override the components' yScale and they will have a single shared yScale instance.
+     * By default the components have their own scale instances but their `domain` and `range` values are synchronized.
+     * Default: `undefined` */
+    yScale?: ContinuousScale;
+    /** Scale domain (data extent) for Y dimension. By default this value is calculated automatically based on data. */
+    yDomain?: [number | undefined, number | undefined];
+    /** Constraint the minimum value of the Y scale domain.
+     * For example, imagine that you have a chart with dynamic data that has negative values. When values are small
+     * (let's say in the range of [-0.01, 0]), you might still want the chart to display some meaningful value range (e.g. [-1, 0]). That can
+     * be achieved by setting `yDomainMinConstraint` to `[undefined, -1]`. In addition to that, if you want to cut off the
+     * values that are too low (let's say lower than -100), you can set the constraint to `[-100, -1]`
+     * Default: `undefined` */
+    yDomainMinConstraint?: [number | undefined, number | undefined];
+    /** Constraint the minimum value of the Y scale domain.
+     * For example, imagine that you have a chart with dynamic data. When values are small
+     * (let's say < 0.01), you might still want the chart to display some meaningful value range (e.g. [0, 1]). That can
+     * be achieved by setting `yDomainMaxConstraint` to `[1, undefined]`. In addition to that, if you want to cut off the
+     * values that are too high (let's say higher than 100), you can set the constraint to `[1, 100]`
+     * Default: `undefined` */
+    yDomainMaxConstraint?: [number | undefined, number | undefined];
+    /** Force set the Y scale range (in the screen space). By default the range is calculated automatically based on the
+     * chart's set up */
+    yRange?: [number, number];
+    /** Y Axis direction. Default: `Direction.North` */
+    yDirection?: Direction.South | Direction.North | string;
+    /** X Axis component instance. Default: `undefined` */
+    xAxis?: Axis<Datum>;
+    /** Y Axis component instance. Default: `undefined` */
+    yAxis?: Axis<Datum>;
+    /** Enables automatic calculation of chart margins based on the size of the axes. Default: `true` */
+    autoMargin?: boolean;
+    /** Tooltip component. Default: `undefined` */
+    tooltip?: Tooltip | undefined;
+    /** Crosshair component. Default: `undefined` */
+    crosshair?: Crosshair<Datum> | undefined;
+    /** Prevents the chart domain from being empty (when domain's min and max values are equal).
+     *  That usually happens when all the data values are the same.
+     *  Setting to `true` will automatically extend the domain by `+1` when needed.
+     *  Default: `true` */
+    preventEmptyDomain?: boolean;
+    /** Sets the Y scale domain based on the current X scale domain (not the whole dataset). Default: `false` */
+    scaleByDomain?: boolean;
+}
+export declare class XYContainerConfig<Datum> extends ContainerConfig implements XYContainerConfigInterface<Datum> {
+    components: any[];
+    tooltip: Tooltip;
+    crosshair: Crosshair<Datum>;
+    xAxis: Axis<Datum>;
+    yAxis: Axis<Datum>;
+    autoMargin: boolean;
+    xScale: any;
+    xDomain: any;
+    xDomainMinConstraint: any;
+    xDomainMaxConstraint: any;
+    xRange: any;
+    yScale: any;
+    yDomain: any;
+    yDomainMinConstraint: any;
+    yDomainMaxConstraint: any;
+    yRange: any;
+    yDirection: Direction;
+    preventEmptyDomain: boolean;
+    scaleByDomain: boolean;
+}