@unovis/ts 1.5.1-xplg.4 → 1.6.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/components/annotations/style.js.map +1 -1
- package/components/area/config.d.ts +7 -3
- package/components/area/config.js +1 -1
- package/components/area/config.js.map +1 -1
- package/components/area/index.js +25 -9
- package/components/area/index.js.map +1 -1
- package/components/area/style.js.map +1 -1
- package/components/axis/index.d.ts +1 -0
- package/components/axis/index.js +10 -2
- package/components/axis/index.js.map +1 -1
- package/components/axis/style.js.map +1 -1
- package/components/brush/config.d.ts +1 -1
- package/components/brush/config.js.map +1 -1
- package/components/brush/style.js.map +1 -1
- package/components/bullet-legend/style.js.map +1 -1
- package/components/chord-diagram/index.js +3 -1
- package/components/chord-diagram/index.js.map +1 -1
- package/components/chord-diagram/style.js.map +1 -1
- package/components/crosshair/style.js.map +1 -1
- package/components/donut/style.js.map +1 -1
- package/components/flow-legend/style.js.map +1 -1
- package/components/free-brush/style.js.map +1 -1
- package/components/graph/index.js +3 -4
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/link/index.js +1 -2
- package/components/graph/modules/link/index.js.map +1 -1
- package/components/graph/modules/link/style.js.map +1 -1
- package/components/graph/modules/node/style.js.map +1 -1
- package/components/graph/modules/panel/style.js.map +1 -1
- package/components/graph/style.js.map +1 -1
- package/components/grouped-bar/style.js.map +1 -1
- package/components/leaflet-flow-map/config.js +0 -1
- package/components/leaflet-flow-map/config.js.map +1 -1
- package/components/leaflet-flow-map/shaders.js.map +1 -1
- package/components/leaflet-map/config.js +0 -1
- package/components/leaflet-map/config.js.map +1 -1
- package/components/leaflet-map/modules/map.js +3 -3
- package/components/leaflet-map/modules/map.js.map +1 -1
- package/components/leaflet-map/renderer/leaflet-maplibre-gl.js.map +1 -1
- package/components/leaflet-map/style.js.map +1 -1
- package/components/line/config.d.ts +5 -0
- package/components/line/config.js +1 -1
- package/components/line/config.js.map +1 -1
- package/components/line/index.js +41 -2
- package/components/line/index.js.map +1 -1
- package/components/line/style.d.ts +1 -0
- package/components/line/style.js +12 -1
- package/components/line/style.js.map +1 -1
- package/components/line/types.d.ts +1 -0
- package/components/nested-donut/config.d.ts +1 -1
- package/components/nested-donut/config.js.map +1 -1
- package/components/nested-donut/style.js.map +1 -1
- package/components/sankey/modules/label.js.map +1 -1
- package/components/sankey/modules/link.js.map +1 -1
- package/components/sankey/style.js.map +1 -1
- package/components/scatter/style.js.map +1 -1
- package/components/stacked-bar/style.js.map +1 -1
- package/components/timeline/config.d.ts +14 -65
- package/components/timeline/config.js +1 -15
- package/components/timeline/config.js.map +1 -1
- package/components/timeline/index.d.ts +10 -21
- package/components/timeline/index.js +93 -379
- package/components/timeline/index.js.map +1 -1
- package/components/timeline/style.d.ts +0 -7
- package/components/timeline/style.js +1 -40
- package/components/timeline/style.js.map +1 -1
- package/components/tooltip/config.d.ts +6 -4
- package/components/tooltip/config.js +3 -1
- package/components/tooltip/config.js.map +1 -1
- package/components/tooltip/index.d.ts +7 -3
- package/components/tooltip/index.js +39 -9
- package/components/tooltip/index.js.map +1 -1
- package/components/tooltip/style.js.map +1 -1
- package/components/topojson-map/index.js.map +1 -1
- package/components/topojson-map/style.js.map +1 -1
- package/components/vis-controls/style.js.map +1 -1
- package/components/xy-labels/style.js.map +1 -1
- package/components.d.ts +0 -4
- package/components.js +0 -2
- package/components.js.map +1 -1
- package/containers/single-container/config.d.ts +0 -3
- package/containers/single-container/config.js.map +1 -1
- package/containers/single-container/index.js +1 -2
- package/containers/single-container/index.js.map +1 -1
- package/containers/xy-container/config.d.ts +0 -5
- package/containers/xy-container/config.js +1 -1
- package/containers/xy-container/config.js.map +1 -1
- package/containers/xy-container/index.d.ts +0 -1
- package/containers/xy-container/index.js +11 -15
- package/containers/xy-container/index.js.map +1 -1
- package/core/container/config.js +0 -1
- package/core/container/config.js.map +1 -1
- package/index.js +3 -5
- package/index.js.map +1 -1
- package/maps/ind-regions.json.js +1 -1
- package/maps/us-counties.json.js +8 -8
- package/package.json +6 -5
- package/styles/index.js.map +1 -1
- package/styles/patterns.js.map +1 -1
- package/styles/sizes.js.map +1 -1
- package/types/position.d.ts +1 -2
- package/types/position.js +0 -1
- package/types/position.js.map +1 -1
- package/types.d.ts +0 -2
- package/types.js +1 -4
- package/types.js.map +1 -1
- package/utils/color.d.ts +0 -14
- package/utils/color.js +2 -26
- package/utils/color.js.map +1 -1
- package/utils/data.d.ts +1 -1
- package/utils/data.js +1 -1
- package/utils/data.js.map +1 -1
- package/utils/index.js +3 -3
- package/utils/path.d.ts +0 -8
- package/utils/path.js +1 -109
- package/utils/path.js.map +1 -1
- package/utils/text.d.ts +1 -2
- package/utils/text.js +2 -10
- package/utils/text.js.map +1 -1
- package/components/rolling-pin-legend/config.d.ts +0 -19
- package/components/rolling-pin-legend/config.js +0 -9
- package/components/rolling-pin-legend/config.js.map +0 -1
- package/components/rolling-pin-legend/index.d.ts +0 -16
- package/components/rolling-pin-legend/index.js +0 -63
- package/components/rolling-pin-legend/index.js.map +0 -1
- package/components/rolling-pin-legend/style.d.ts +0 -5
- package/components/rolling-pin-legend/style.js +0 -40
- package/components/rolling-pin-legend/style.js.map +0 -1
- package/components/rolling-pin-legend/types.d.ts +0 -1
- package/components/timeline/constants.d.ts +0 -3
- package/components/timeline/constants.js +0 -6
- package/components/timeline/constants.js.map +0 -1
- package/components/timeline/types.d.ts +0 -62
- package/components/timeline/types.js +0 -2
- package/components/timeline/types.js.map +0 -1
- package/components/timeline/utils.d.ts +0 -2
- package/components/timeline/utils.js +0 -16
- package/components/timeline/utils.js.map +0 -1
- package/components/treemap/config.d.ts +0 -44
- package/components/treemap/config.js +0 -6
- package/components/treemap/config.js.map +0 -1
- package/components/treemap/index.d.ts +0 -16
- package/components/treemap/index.js +0 -263
- package/components/treemap/index.js.map +0 -1
- package/components/treemap/style.d.ts +0 -22
- package/components/treemap/style.js +0 -62
- package/components/treemap/style.js.map +0 -1
- package/components/treemap/types.d.ts +0 -11
- package/components/treemap/types.js +0 -2
- package/components/treemap/types.js.map +0 -1
package/components/line/index.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Curve, CurveType } from '../../types/curve.js';
|
|
|
9
9
|
import { Direction } from '../../types/direction.js';
|
|
10
10
|
import { LineDefaultConfig } from './config.js';
|
|
11
11
|
import * as style from './style.js';
|
|
12
|
-
import { line as line$1, linePath, lineSelectionHelper, dim } from './style.js';
|
|
12
|
+
import { line as line$1, linePath, lineSelectionHelper, interpolatedPath, dim } from './style.js';
|
|
13
13
|
|
|
14
14
|
class Line extends XYComponentCore {
|
|
15
15
|
constructor(config) {
|
|
@@ -59,20 +59,42 @@ class Line extends XYComponentCore {
|
|
|
59
59
|
const rawValue = getNumber(d, a, i);
|
|
60
60
|
// If `rawValue` is not numerical or if it's not finite (`NaN`, `undefined`, ...), we replace it with `config.fallbackValue`
|
|
61
61
|
const value = (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue) ? rawValue : config.fallbackValue;
|
|
62
|
+
const defined = config.interpolateMissingData
|
|
63
|
+
? (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue)
|
|
64
|
+
: isFinite(value);
|
|
62
65
|
return {
|
|
63
66
|
x: lineDataX[i],
|
|
64
67
|
y: this.yScale(value !== null && value !== void 0 ? value : 0),
|
|
65
|
-
defined
|
|
68
|
+
defined,
|
|
66
69
|
value,
|
|
67
70
|
};
|
|
68
71
|
});
|
|
69
72
|
const defined = ld.reduce((def, d) => (d.defined || def), false);
|
|
73
|
+
let validGap = false;
|
|
74
|
+
const gaps = ld.reduce((acc, d, i) => {
|
|
75
|
+
// Gaps include fallback values if configured.
|
|
76
|
+
if (!d.defined && isFinite(config.fallbackValue)) {
|
|
77
|
+
acc.push(Object.assign(Object.assign({}, d), { defined: true }));
|
|
78
|
+
}
|
|
79
|
+
if (!d.defined && !validGap)
|
|
80
|
+
validGap = true;
|
|
81
|
+
const isEndpoint = (i > 0 && !ld[i - 1].defined) || (i < ld.length - 1 && !ld[i + 1].defined);
|
|
82
|
+
if (d.defined && isEndpoint) {
|
|
83
|
+
// If no undefined points have been found since the last endpoint, we insert one to enforce breaks between adjacent gaps.
|
|
84
|
+
if (!validGap)
|
|
85
|
+
acc.push(Object.assign(Object.assign({}, d), { defined: false }));
|
|
86
|
+
acc.push(d);
|
|
87
|
+
validGap = false;
|
|
88
|
+
}
|
|
89
|
+
return acc;
|
|
90
|
+
}, []);
|
|
70
91
|
// If the line consists only of `null` values, we'll still render it but it'll be invisible.
|
|
71
92
|
// Such trick allows us to have better animated transitions.
|
|
72
93
|
const visible = defined && ld.some(d => d.value !== null);
|
|
73
94
|
return {
|
|
74
95
|
values: ld,
|
|
75
96
|
defined,
|
|
97
|
+
gaps,
|
|
76
98
|
visible,
|
|
77
99
|
};
|
|
78
100
|
});
|
|
@@ -91,6 +113,10 @@ class Line extends XYComponentCore {
|
|
|
91
113
|
.append('path')
|
|
92
114
|
.attr('class', lineSelectionHelper)
|
|
93
115
|
.attr('d', this._emptyPath());
|
|
116
|
+
linesEnter.append('path')
|
|
117
|
+
.attr('class', interpolatedPath)
|
|
118
|
+
.attr('d', this._emptyPath())
|
|
119
|
+
.style('opacity', 0);
|
|
94
120
|
const linesMerged = linesEnter.merge(lines);
|
|
95
121
|
linesMerged.style('cursor', (d, i) => getString(data, config.cursor, i));
|
|
96
122
|
linesMerged.each((d, i, elements) => {
|
|
@@ -98,6 +124,7 @@ class Line extends XYComponentCore {
|
|
|
98
124
|
const group = select(elements[i]);
|
|
99
125
|
const linePath$1 = group.select(`.${linePath}`);
|
|
100
126
|
const lineSelectionHelper$1 = group.select(`.${lineSelectionHelper}`);
|
|
127
|
+
const lineGaps = group.select(`.${interpolatedPath}`);
|
|
101
128
|
const isLineVisible = d.visible;
|
|
102
129
|
const dashArray = getValue(data, config.lineDashArray, i);
|
|
103
130
|
const transition = smartTransition(linePath$1, duration)
|
|
@@ -119,6 +146,18 @@ class Line extends XYComponentCore {
|
|
|
119
146
|
lineSelectionHelper$1
|
|
120
147
|
.attr('d', svgPathD)
|
|
121
148
|
.attr('visibility', isLineVisible ? null : 'hidden');
|
|
149
|
+
if (hasUndefinedSegments && config.interpolateMissingData) {
|
|
150
|
+
smartTransition(lineGaps, duration)
|
|
151
|
+
.attr('d', this.lineGen(d.gaps))
|
|
152
|
+
.attr('stroke', getColor(data, config.color, i))
|
|
153
|
+
.attr('stroke-width', config.lineWidth - 1)
|
|
154
|
+
.style('opacity', 1);
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
lineGaps.transition()
|
|
158
|
+
.duration(duration)
|
|
159
|
+
.style('opacity', 0);
|
|
160
|
+
}
|
|
122
161
|
});
|
|
123
162
|
smartTransition(lines.exit(), duration)
|
|
124
163
|
.style('opacity', 0)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/line/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { CurveFactoryLineOnly, Line as LineGenInterface, line } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, getValue, isArray, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Curve, CurveType } from 'types/curve'\nimport { Direction } from 'types/direction'\n\n// Local Types\nimport { LineData, LineDatum } from './types'\n\n// Config\nimport { LineDefaultConfig, LineConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Line<Datum> extends XYComponentCore<Datum, LineConfigInterface<Datum>> {\n static selectors = s\n protected _defaultConfig = LineDefaultConfig as LineConfigInterface<Datum>\n public config: LineConfigInterface<Datum> = this._defaultConfig\n lineGen: LineGenInterface<{ x: number; y: number; defined: boolean }>\n curve: CurveFactoryLineOnly = Curve[CurveType.MonotoneX]\n events = {\n [Line.selectors.line]: {\n mouseover: this._highlight.bind(this),\n mouseleave: this._resetHighlight.bind(this),\n },\n }\n\n constructor (config?: LineConfigInterface<Datum>) {\n super()\n if (config) this.setConfig(config)\n }\n\n get bleed (): Spacing {\n const { config: { lineWidth } } = this\n const yDomain = this.yScale.domain() as [number, number]\n const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n ? Direction.North\n : Direction.South\n const isYDirectionSouth = yDirection === Direction.South\n\n const isLineThick = lineWidth > 3\n const isLineVeryThick = lineWidth >= 10\n return {\n top: !isLineVeryThick && (\n (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n ) ? 0 : lineWidth / 2,\n bottom: !isLineVeryThick && (\n (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n ) ? 0 : lineWidth / 2,\n left: isLineThick ? lineWidth / 2 : 0,\n right: isLineThick ? lineWidth / 2 : 0,\n }\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, datamodel: { data } } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n this.curve = Curve[config.curveType]\n this.lineGen = line<{ x: number; y: number; defined: boolean }>()\n .x(d => d.x)\n .y(d => d.y)\n .defined(d => d.defined)\n .curve(this.curve)\n\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n const lineDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n const lineData: LineData[] = yAccessors.map(a => {\n const ld: LineDatum[] = data.map((d, i) => {\n const rawValue = getNumber(d, a, i)\n // If `rawValue` is not numerical or if it's not finite (`NaN`, `undefined`, ...), we replace it with `config.fallbackValue`\n const value = (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue) ? rawValue : config.fallbackValue\n return {\n x: lineDataX[i],\n y: this.yScale(value ?? 0),\n defined: isFinite(value),\n value,\n }\n })\n\n const defined = ld.reduce((def, d) => (d.defined || def), false)\n // If the line consists only of `null` values, we'll still render it but it'll be invisible.\n // Such trick allows us to have better animated transitions.\n const visible = defined && ld.some(d => d.value !== null)\n return {\n values: ld,\n defined,\n visible,\n }\n })\n\n const lines = this.g\n .selectAll<SVGGElement, LineData>(`.${s.line}`)\n .data(lineData)\n\n const linesEnter = lines.enter().append('g')\n .attr('class', s.line)\n\n linesEnter\n .append('path')\n .attr('class', s.linePath)\n .attr('stroke', (d, i) => getColor(data, config.color, i))\n .attr('stroke-opacity', 0)\n .attr('stroke-width', config.lineWidth)\n\n linesEnter\n .append('path')\n .attr('class', s.lineSelectionHelper)\n .attr('d', this._emptyPath())\n\n const linesMerged = linesEnter.merge(lines)\n linesMerged.style('cursor', (d, i) => getString(data, config.cursor, i))\n linesMerged.each((d, i, elements) => {\n const group = select(elements[i])\n const linePath = group.select<SVGPathElement>(`.${s.linePath}`)\n const lineSelectionHelper = group.select(`.${s.lineSelectionHelper}`)\n\n const isLineVisible = d.visible\n const dashArray = getValue<Datum[], number[]>(data, config.lineDashArray, i)\n const transition = smartTransition(linePath, duration)\n .attr('stroke', getColor(data, config.color, i))\n .attr('stroke-width', config.lineWidth)\n .attr('stroke-opacity', isLineVisible ? 1 : 0)\n .style('stroke-dasharray', dashArray?.join(' ') ?? null) // We use `.style` because there's also a default CSS-variable for stroke-dasharray\n\n const hasUndefinedSegments = d.values.some(d => !d.defined)\n const svgPathD = this.lineGen(d.values)\n\n if (duration && !hasUndefinedSegments) {\n const previous = linePath.attr('d') || this._emptyPath()\n const next = svgPathD || this._emptyPath()\n const t = transition as Transition<SVGPathElement, LineData, SVGGElement, LineData>\n t.attrTween('d', () => interpolatePath(previous, next))\n } else if (d.visible) {\n transition.attr('d', svgPathD)\n }\n\n lineSelectionHelper\n .attr('d', svgPathD)\n .attr('visibility', isLineVisible ? null : 'hidden')\n })\n\n smartTransition(lines.exit(), duration)\n .style('opacity', 0)\n .remove()\n }\n\n private _emptyPath (): string {\n const xRange = this.xScale.range()\n const yRange = this.yScale.range()\n return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n }\n\n private _highlight (datum: Datum): void {\n const { config } = this\n\n if (config.highlightOnHover) {\n this.g\n .selectAll(`.${s.line}`)\n .classed(s.dim, d => d !== datum)\n }\n }\n\n private _resetHighlight (): void {\n const { config } = this\n\n if (config.highlightOnHover) {\n this.g\n .selectAll(`.${s.line}`)\n .classed(s.dim, false)\n }\n }\n}\n"],"names":["s.line","s.linePath","s.lineSelectionHelper","linePath","lineSelectionHelper","s.dim","s"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/line/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { CurveFactoryLineOnly, Line as LineGenInterface, line } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, getValue, isArray, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Curve, CurveType } from 'types/curve'\nimport { Direction } from 'types/direction'\n\n// Local Types\nimport { LineData, LineDatum } from './types'\n\n// Config\nimport { LineDefaultConfig, LineConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Line<Datum> extends XYComponentCore<Datum, LineConfigInterface<Datum>> {\n static selectors = s\n protected _defaultConfig = LineDefaultConfig as LineConfigInterface<Datum>\n public config: LineConfigInterface<Datum> = this._defaultConfig\n lineGen: LineGenInterface<{ x: number; y: number; defined: boolean }>\n curve: CurveFactoryLineOnly = Curve[CurveType.MonotoneX]\n events = {\n [Line.selectors.line]: {\n mouseover: this._highlight.bind(this),\n mouseleave: this._resetHighlight.bind(this),\n },\n }\n\n constructor (config?: LineConfigInterface<Datum>) {\n super()\n if (config) this.setConfig(config)\n }\n\n get bleed (): Spacing {\n const { config: { lineWidth } } = this\n const yDomain = this.yScale.domain() as [number, number]\n const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n ? Direction.North\n : Direction.South\n const isYDirectionSouth = yDirection === Direction.South\n\n const isLineThick = lineWidth > 3\n const isLineVeryThick = lineWidth >= 10\n return {\n top: !isLineVeryThick && (\n (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n ) ? 0 : lineWidth / 2,\n bottom: !isLineVeryThick && (\n (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n ) ? 0 : lineWidth / 2,\n left: isLineThick ? lineWidth / 2 : 0,\n right: isLineThick ? lineWidth / 2 : 0,\n }\n }\n\n _render (customDuration?: number): void {\n super._render(customDuration)\n const { config, datamodel: { data } } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n this.curve = Curve[config.curveType]\n this.lineGen = line<{ x: number; y: number; defined: boolean }>()\n .x(d => d.x)\n .y(d => d.y)\n .defined(d => d.defined)\n .curve(this.curve)\n\n const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n const lineDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n const lineData: LineData[] = yAccessors.map(a => {\n const ld: LineDatum[] = data.map((d, i) => {\n const rawValue = getNumber(d, a, i)\n\n // If `rawValue` is not numerical or if it's not finite (`NaN`, `undefined`, ...), we replace it with `config.fallbackValue`\n const value = (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue) ? rawValue : config.fallbackValue\n const defined = config.interpolateMissingData\n ? (isNumber(rawValue) || (rawValue === null)) && isFinite(rawValue)\n : isFinite(value)\n\n return {\n x: lineDataX[i],\n y: this.yScale(value ?? 0),\n defined,\n value,\n }\n })\n const defined = ld.reduce((def, d) => (d.defined || def), false)\n\n let validGap = false\n const gaps = ld.reduce((acc, d, i) => {\n // Gaps include fallback values if configured.\n if (!d.defined && isFinite(config.fallbackValue)) {\n acc.push({ ...d, defined: true })\n }\n\n if (!d.defined && !validGap) validGap = true\n\n const isEndpoint = (i > 0 && !ld[i - 1].defined) || (i < ld.length - 1 && !ld[i + 1].defined)\n if (d.defined && isEndpoint) {\n // If no undefined points have been found since the last endpoint, we insert one to enforce breaks between adjacent gaps.\n if (!validGap) acc.push({ ...d, defined: false })\n acc.push(d)\n validGap = false\n }\n return acc\n }, [])\n\n // If the line consists only of `null` values, we'll still render it but it'll be invisible.\n // Such trick allows us to have better animated transitions.\n const visible = defined && ld.some(d => d.value !== null)\n return {\n values: ld,\n defined,\n gaps,\n visible,\n }\n })\n\n const lines = this.g\n .selectAll<SVGGElement, LineData>(`.${s.line}`)\n .data(lineData)\n\n const linesEnter = lines.enter().append('g')\n .attr('class', s.line)\n\n linesEnter\n .append('path')\n .attr('class', s.linePath)\n .attr('stroke', (d, i) => getColor(data, config.color, i))\n .attr('stroke-opacity', 0)\n .attr('stroke-width', config.lineWidth)\n\n linesEnter\n .append('path')\n .attr('class', s.lineSelectionHelper)\n .attr('d', this._emptyPath())\n\n linesEnter.append('path')\n .attr('class', s.interpolatedPath)\n .attr('d', this._emptyPath())\n .style('opacity', 0)\n\n const linesMerged = linesEnter.merge(lines)\n linesMerged.style('cursor', (d, i) => getString(data, config.cursor, i))\n linesMerged.each((d, i, elements) => {\n const group = select(elements[i])\n const linePath = group.select<SVGPathElement>(`.${s.linePath}`)\n const lineSelectionHelper = group.select(`.${s.lineSelectionHelper}`)\n const lineGaps = group.select(`.${s.interpolatedPath}`)\n\n const isLineVisible = d.visible\n const dashArray = getValue<Datum[], number[]>(data, config.lineDashArray, i)\n const transition = smartTransition(linePath, duration)\n .attr('stroke', getColor(data, config.color, i))\n .attr('stroke-width', config.lineWidth)\n .attr('stroke-opacity', isLineVisible ? 1 : 0)\n .style('stroke-dasharray', dashArray?.join(' ') ?? null) // We use `.style` because there's also a default CSS-variable for stroke-dasharray\n\n const hasUndefinedSegments = d.values.some(d => !d.defined)\n const svgPathD = this.lineGen(d.values)\n\n if (duration && !hasUndefinedSegments) {\n const previous = linePath.attr('d') || this._emptyPath()\n const next = svgPathD || this._emptyPath()\n const t = transition as Transition<SVGPathElement, LineData, SVGGElement, LineData>\n t.attrTween('d', () => interpolatePath(previous, next))\n } else if (d.visible) {\n transition.attr('d', svgPathD)\n }\n\n lineSelectionHelper\n .attr('d', svgPathD)\n .attr('visibility', isLineVisible ? null : 'hidden')\n\n if (hasUndefinedSegments && config.interpolateMissingData) {\n smartTransition(lineGaps, duration)\n .attr('d', this.lineGen(d.gaps))\n .attr('stroke', getColor(data, config.color, i))\n .attr('stroke-width', config.lineWidth - 1)\n .style('opacity', 1)\n } else {\n lineGaps.transition()\n .duration(duration)\n .style('opacity', 0)\n }\n })\n\n smartTransition(lines.exit(), duration)\n .style('opacity', 0)\n .remove()\n }\n\n private _emptyPath (): string {\n const xRange = this.xScale.range()\n const yRange = this.yScale.range()\n return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n }\n\n private _highlight (datum: Datum): void {\n const { config } = this\n\n if (config.highlightOnHover) {\n this.g\n .selectAll(`.${s.line}`)\n .classed(s.dim, d => d !== datum)\n }\n }\n\n private _resetHighlight (): void {\n const { config } = this\n\n if (config.highlightOnHover) {\n this.g\n .selectAll(`.${s.line}`)\n .classed(s.dim, false)\n }\n }\n}\n"],"names":["s.line","s.linePath","s.lineSelectionHelper","s.interpolatedPath","linePath","lineSelectionHelper","s.dim","s"],"mappings":"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"}
|
package/components/line/style.js
CHANGED
|
@@ -5,6 +5,10 @@ const globalStyles = injectGlobal `
|
|
|
5
5
|
--vis-line-cursor: default;
|
|
6
6
|
--vis-line-stroke-dasharray: none;
|
|
7
7
|
--vis-line-stroke-dashoffset: 0;
|
|
8
|
+
|
|
9
|
+
--vis-line-gapfill-stroke-dasharray: 2 3;
|
|
10
|
+
--vis-line-gapfill-stroke-opacity: 0.8;
|
|
11
|
+
--vis-line-gapfill-stroke-dashoffset: 0;
|
|
8
12
|
}
|
|
9
13
|
`;
|
|
10
14
|
const root = css `
|
|
@@ -29,7 +33,14 @@ const lineSelectionHelper = css `
|
|
|
29
33
|
`;
|
|
30
34
|
const dim = css `
|
|
31
35
|
opacity: 0.2;
|
|
36
|
+
`;
|
|
37
|
+
const interpolatedPath = css `
|
|
38
|
+
label: interpolated-path;
|
|
39
|
+
fill: none;
|
|
40
|
+
stroke-dasharray: var(--vis-line-gapfill-stroke-dasharray);
|
|
41
|
+
stroke-dashoffset: var(--vis-line-gapfill-stroke-dashoffset);
|
|
42
|
+
stroke-opacity: var(--vis-line-gapfill-stroke-opacity);
|
|
32
43
|
`;
|
|
33
44
|
|
|
34
|
-
export { dim, globalStyles, line, linePath, lineSelectionHelper, root };
|
|
45
|
+
export { dim, globalStyles, interpolatedPath, line, linePath, lineSelectionHelper, root };
|
|
35
46
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/line/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-line-cursor: default;\n --vis-line-stroke-dasharray: none;\n --vis-line-stroke-dashoffset: 0;\n }\n`\n\nexport const root = css`\n label: line-component;\n`\n\nexport const line = css`\n label: line;\n transition: opacity 200ms;\n cursor: var(--vis-line-cursor);\n`\n\nexport const linePath = css`\n label: linePath;\n fill: none;\n stroke-dasharray: var(--vis-line-stroke-dasharray);\n stroke-dashoffset: var(--vis-line-stroke-dashoffset);\n`\n\nexport const lineSelectionHelper = css`\n label: lineSelectionHelper;\n fill: none;\n stroke: rgba(0, 0, 0, 0);\n stroke-width: 8px;\n`\n\nexport const dim = css`\n opacity: 0.2;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/line/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-line-cursor: default;\n --vis-line-stroke-dasharray: none;\n --vis-line-stroke-dashoffset: 0;\n\n --vis-line-gapfill-stroke-dasharray: 2 3;\n --vis-line-gapfill-stroke-opacity: 0.8;\n --vis-line-gapfill-stroke-dashoffset: 0;\n }\n`\n\nexport const root = css`\n label: line-component;\n`\n\nexport const line = css`\n label: line;\n transition: opacity 200ms;\n cursor: var(--vis-line-cursor);\n`\n\nexport const linePath = css`\n label: linePath;\n fill: none;\n stroke-dasharray: var(--vis-line-stroke-dasharray);\n stroke-dashoffset: var(--vis-line-stroke-dashoffset);\n`\n\nexport const lineSelectionHelper = css`\n label: lineSelectionHelper;\n fill: none;\n stroke: rgba(0, 0, 0, 0);\n stroke-width: 8px;\n`\n\nexport const dim = css`\n opacity: 0.2;\n`\n\nexport const interpolatedPath = css`\n label: interpolated-path;\n fill: none;\n stroke-dasharray: var(--vis-line-gapfill-stroke-dasharray);\n stroke-dashoffset: var(--vis-line-gapfill-stroke-dashoffset);\n stroke-opacity: var(--vis-line-gapfill-stroke-opacity);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;EAUvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;EAItB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;EAK1B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;EAKrC;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;EAErB;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;"}
|
|
@@ -26,7 +26,7 @@ export interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterf
|
|
|
26
26
|
showBackground?: boolean;
|
|
27
27
|
/** Sort function for segments. Default `undefined` */
|
|
28
28
|
sort?: (a: NestedDonutSegment<Datum>, b: NestedDonutSegment<Datum>) => number;
|
|
29
|
-
/** Array of accessor functions to defined the nested groups
|
|
29
|
+
/** Array of accessor functions to defined the nested groups */
|
|
30
30
|
layers: StringAccessor<Datum>[];
|
|
31
31
|
/**
|
|
32
32
|
* Configuration properties for individual layers. Accepts an accessor or constant of type:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/nested-donut/config.ts"],"sourcesContent":["// Core\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types'\n\nexport interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {\n /** Diagram angle range. Default: `[0, 2 * Math.PI]` */\n angleRange?: [number, number];\n /**\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 /* Numeric accessor for segment size value. Default: `undefined`. */\n value?: NumericAccessor<Datum>;\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: `false`\n */\n showBackground?: boolean;\n /** Sort function for segments. Default `undefined` */\n sort?: (a: NestedDonutSegment<Datum>, b: NestedDonutSegment<Datum>) => number;\n\n // Layers\n /** Array of accessor functions to defined the nested groups
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/nested-donut/config.ts"],"sourcesContent":["// Core\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\nimport { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types'\n\nexport interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {\n /** Diagram angle range. Default: `[0, 2 * Math.PI]` */\n angleRange?: [number, number];\n /**\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 /* Numeric accessor for segment size value. Default: `undefined`. */\n value?: NumericAccessor<Datum>;\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: `false`\n */\n showBackground?: boolean;\n /** Sort function for segments. Default `undefined` */\n sort?: (a: NestedDonutSegment<Datum>, b: NestedDonutSegment<Datum>) => number;\n\n // Layers\n /** Array of accessor functions to defined the nested groups */\n layers: StringAccessor<Datum>[];\n /**\n * Configuration properties for individual layers. Accepts an accessor or constant of type:\n * {\n * backgroundColor?: string;\n * labelAlignment?: NestedDonutSegmentLabelAlignment;\n * width?: number | string;\n * }\n */\n layerSettings?: GenericAccessor<NestedDonutLayerSettings, number>;\n /* Space between layers */\n layerPadding?: number;\n\n // Segments\n /** Corner Radius. Default: `0` */\n cornerRadius?: number;\n /** Angular size for empty segments in radians. Default: `Math.PI / 180` */\n emptySegmentAngle?: number;\n /** Hide segment labels when they don't fit. Default: `true` */\n hideOverflowingSegmentLabels?: boolean;\n /** Color accessor function for segments. Default: `undefined` */\n segmentColor?: ColorAccessor<NestedDonutSegment<Datum>>;\n /** Segment label accessor function. Default `undefined` */\n segmentLabel?: StringAccessor<NestedDonutSegment<Datum>>;\n /** Color accessor function for segment labels */\n segmentLabelColor?: ColorAccessor<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 /** Show labels for individual segments. Default: `true` */\n showSegmentLabels?: boolean;\n}\n\nexport const NestedDonutDefaultConfig: NestedDonutConfigInterface<unknown> = {\n ...ComponentDefaultConfig,\n angleRange: [0, 2 * Math.PI],\n centralLabel: undefined,\n centralSubLabel: undefined,\n centralSubLabelWrap: true,\n cornerRadius: 0,\n direction: NestedDonutDirection.Inwards,\n emptySegmentAngle: Math.PI / 180,\n hideOverflowingSegmentLabels: true,\n layers: [],\n layerPadding: 0,\n layerSettings: undefined,\n segmentColor: undefined,\n segmentLabel: undefined,\n segmentLabelColor: undefined,\n showBackground: false,\n showEmptySegments: false,\n showSegmentLabels: true,\n sort: undefined,\n value: undefined,\n}\n"],"names":[],"mappings":";;;AAAA;MAwEa,wBAAwB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAChC,sBAAsB,CACzB,EAAA,EAAA,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,EAC5B,YAAY,EAAE,SAAS,EACvB,eAAe,EAAE,SAAS,EAC1B,mBAAmB,EAAE,IAAI,EACzB,YAAY,EAAE,CAAC,EACf,SAAS,EAAE,oBAAoB,CAAC,OAAO,EACvC,iBAAiB,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,EAChC,4BAA4B,EAAE,IAAI,EAClC,MAAM,EAAE,EAAE,EACV,YAAY,EAAE,CAAC,EACf,aAAa,EAAE,SAAS,EACxB,YAAY,EAAE,SAAS,EACvB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,KAAK,EACrB,iBAAiB,EAAE,KAAK,EACxB,iBAAiB,EAAE,IAAI,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,EAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/nested-donut/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n '--vis-nested-donut-font-family': undefined as undefined,\n\n // Background\n '--vis-nested-donut-background-color': '#E7E9F3',\n\n // Central label\n '--vis-nested-donut-central-label-font-size': '16px',\n '--vis-nested-donut-central-label-font-weight': 600,\n '--vis-nested-donut-central-label-text-color': '#5b5f6d',\n\n // Central sub-label\n '--vis-nested-donut-central-sublabel-font-size': '12px;',\n '--vis-nested-donut-central-sublabel-font-weight': 500,\n '--vis-nested-donut-central-sublabel-text-color': '#5b5f6d',\n\n // Segments\n '--vis-nested-donut-segment-stroke-width': '1px',\n '--vis-nested-donut-segment-stroke-color': 'var(--vis-nested-donut-background-color)',\n '--vis-nested-donut-segment-label-text-color-light': '#5b5f6d',\n '--vis-nested-donut-segment-label-text-color-dark': '#fff',\n '--vis-nested-donut-segment-label-font-size': '1em',\n\n /* Dark theme */\n '--vis-dark-nested-donut-background-color': '#18160C',\n '--vis-dark-nested-donut-central-label-text-color': '#fff',\n '--vis-dark-nested-donut-central-sublabel-text-color': '#fff',\n}\n\nexport const root = css`\n label: nested-donut-component;\n`\n\nexport const segmentsGroup = css`\n label: nested-donut-segments-group;\n`\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const background = css`\n label: background;\n fill: var(--vis-nested-donut-background-color);\n stroke-width: var(--vis-nested-donut-segment-stroke-width);\n stroke: var(--vis-nested-donut-segment-stroke-color);\n`\n\nexport const segment = css`\n label: segment;\n `\n\nexport const segmentExit = css`\n label: segment-exit;\n`\n\nexport const segmentArc = css`\n label: segment-arc;\n stroke-width: var(--vis-nested-donut-segment-stroke-width);\n stroke: var(--vis-nested-donut-segment-stroke-color);\n`\n\nexport const segmentLabel = css`\n label: segment-label;\n text-anchor: middle;\n dominant-baseline: middle;\n user-select: none;\n font-size: var(--vis-nested-donut-segment-label-font-size);\n`\n\nexport const centralLabel = css`\n label: central-label;\n text-anchor: middle;\n dominant-baseline: middle;\n font-size: var(--vis-nested-donut-central-label-font-size);\n font-family: var(--vis-nested-donut-central-label-font-family, var(--vis-font-family));\n font-weight: var(--vis-nested-donut-central-label-font-weight);\n fill: var(--vis-nested-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n label: central-sub-label;\n text-anchor: middle;\n dominant-baseline: middle;\n font-size: var(--vis-nested-donut-central-sublabel-font-size);\n font-family: var(--vis-nested-donut-central-sublabel-font-family, var(--vis-font-family));\n font-weight: var(--vis-nested-donut-central-sublabel-font-weight);\n fill: var(--vis-nested-donut-central-sublabel-text-color);\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;;AAErB,IAAA,gCAAgC,EAAE,SAAsB;;AAGxD,IAAA,qCAAqC,EAAE,SAAS;;AAGhD,IAAA,4CAA4C,EAAE,MAAM;AACpD,IAAA,8CAA8C,EAAE,GAAG;AACnD,IAAA,6CAA6C,EAAE,SAAS;;AAGxD,IAAA,+CAA+C,EAAE,OAAO;AACxD,IAAA,iDAAiD,EAAE,GAAG;AACtD,IAAA,gDAAgD,EAAE,SAAS;;AAG3D,IAAA,yCAAyC,EAAE,KAAK;AAChD,IAAA,yCAAyC,EAAE,0CAA0C;AACrF,IAAA,mDAAmD,EAAE,SAAS;AAC9D,IAAA,kDAAkD,EAAE,MAAM;AAC1D,IAAA,4CAA4C,EAAE,KAAK;;AAGnD,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,kDAAkD,EAAE,MAAM;AAC1D,IAAA,qDAAqD,EAAE,MAAM;CAC9D,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA;;EAE/B;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;EAK5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA;;GAExB;AAEK,MAAM,WAAW,GAAG,GAAG,CAAA;;EAE7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;;;EAI5B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;EAM9B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/nested-donut/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n '--vis-nested-donut-font-family': undefined as undefined,\n\n // Background\n '--vis-nested-donut-background-color': '#E7E9F3',\n\n // Central label\n '--vis-nested-donut-central-label-font-size': '16px',\n '--vis-nested-donut-central-label-font-weight': 600,\n '--vis-nested-donut-central-label-text-color': '#5b5f6d',\n\n // Central sub-label\n '--vis-nested-donut-central-sublabel-font-size': '12px;',\n '--vis-nested-donut-central-sublabel-font-weight': 500,\n '--vis-nested-donut-central-sublabel-text-color': '#5b5f6d',\n\n // Segments\n '--vis-nested-donut-segment-stroke-width': '1px',\n '--vis-nested-donut-segment-stroke-color': 'var(--vis-nested-donut-background-color)',\n '--vis-nested-donut-segment-label-text-color-light': '#5b5f6d',\n '--vis-nested-donut-segment-label-text-color-dark': '#fff',\n '--vis-nested-donut-segment-label-font-size': '1em',\n\n /* Dark theme */\n '--vis-dark-nested-donut-background-color': '#18160C',\n '--vis-dark-nested-donut-central-label-text-color': '#fff',\n '--vis-dark-nested-donut-central-sublabel-text-color': '#fff',\n}\n\nexport const root = css`\n label: nested-donut-component;\n`\n\nexport const segmentsGroup = css`\n label: nested-donut-segments-group;\n`\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const background = css`\n label: background;\n fill: var(--vis-nested-donut-background-color);\n stroke-width: var(--vis-nested-donut-segment-stroke-width);\n stroke: var(--vis-nested-donut-segment-stroke-color);\n`\n\nexport const segment = css`\n label: segment;\n `\n\nexport const segmentExit = css`\n label: segment-exit;\n`\n\nexport const segmentArc = css`\n label: segment-arc;\n stroke-width: var(--vis-nested-donut-segment-stroke-width);\n stroke: var(--vis-nested-donut-segment-stroke-color);\n`\n\nexport const segmentLabel = css`\n label: segment-label;\n text-anchor: middle;\n dominant-baseline: middle;\n user-select: none;\n font-size: var(--vis-nested-donut-segment-label-font-size);\n`\n\nexport const centralLabel = css`\n label: central-label;\n text-anchor: middle;\n dominant-baseline: middle;\n font-size: var(--vis-nested-donut-central-label-font-size);\n font-family: var(--vis-nested-donut-central-label-font-family, var(--vis-font-family));\n font-weight: var(--vis-nested-donut-central-label-font-weight);\n fill: var(--vis-nested-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n label: central-sub-label;\n text-anchor: middle;\n dominant-baseline: middle;\n font-size: var(--vis-nested-donut-central-sublabel-font-size);\n font-family: var(--vis-nested-donut-central-sublabel-font-family, var(--vis-font-family));\n font-weight: var(--vis-nested-donut-central-sublabel-font-weight);\n fill: var(--vis-nested-donut-central-sublabel-text-color);\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;;AAErB,IAAA,gCAAgC,EAAE,SAAsB;;AAGxD,IAAA,qCAAqC,EAAE,SAAS;;AAGhD,IAAA,4CAA4C,EAAE,MAAM;AACpD,IAAA,8CAA8C,EAAE,GAAG;AACnD,IAAA,6CAA6C,EAAE,SAAS;;AAGxD,IAAA,+CAA+C,EAAE,OAAO;AACxD,IAAA,iDAAiD,EAAE,GAAG;AACtD,IAAA,gDAAgD,EAAE,SAAS;;AAG3D,IAAA,yCAAyC,EAAE,KAAK;AAChD,IAAA,yCAAyC,EAAE,0CAA0C;AACrF,IAAA,mDAAmD,EAAE,SAAS;AAC9D,IAAA,kDAAkD,EAAE,MAAM;AAC1D,IAAA,4CAA4C,EAAE,KAAK;;AAGnD,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,kDAAkD,EAAE,MAAM;AAC1D,IAAA,qDAAqD,EAAE,MAAM;CAC9D,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;GAExB;AAEK,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;EAM9B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label.js","sources":["../../../../src/components/sankey/modules/label.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Utils\nimport { estimateTextSize, trimSVGText, wrapSVGText } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\nimport { getString, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { GenericAccessor } from 'types/accessor'\nimport { FitMode, VerticalAlign } from 'types/text'\nimport { Position } from 'types/position'\n\n// Local Types\nimport { SankeyInputLink, SankeyInputNode, SankeyNode, SankeySubLabelPlacement } from '../types'\n\n// Config\nimport { SankeyConfigInterface } from '../config'\n\n// Styles\nimport * as s from '../style'\n\n\nconst NODE_LABEL_SPACING = 10\nconst LABEL_BLOCK_PADDING = 6.5\n\nfunction getLabelBackground (\n width: number,\n height: number,\n orientation: Position.Left | Position.Right,\n arrowWidth = 5,\n arrowHeight = 8\n): string {\n const halfHeight = height / 2\n const halfArrowHeight = arrowHeight / 2\n\n if (orientation === Position.Left) {\n const rightArrowPos = `L 0 ${halfHeight - halfArrowHeight} L ${+arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`\n return `\n M 0 0\n ${rightArrowPos}\n L 0 ${height}\n L ${-width} ${height}\n L ${-width} 0\n L 0 0 `\n } else {\n const leftArrowPos = `L 0 ${halfHeight - halfArrowHeight} L ${-arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`\n return `\n M 0 0\n ${leftArrowPos}\n L 0 ${height}\n L ${width} ${height}\n L ${width} 0\n L 0 0 `\n }\n}\n\nexport function getLabelOrientation<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n sankeyWidth: number,\n labelPosition: GenericAccessor<Position.Auto | Position.Left | Position.Right | string, SankeyNode<N, L>>\n): (Position.Left | Position.Right) {\n let orientation = getValue(d, labelPosition)\n if (orientation === Position.Auto || !orientation) {\n orientation = d.x0 < sankeyWidth / 2 ? Position.Left : Position.Right\n }\n\n return orientation as (Position.Left | Position.Right)\n}\n\nexport const requiredLabelSpace = (labelWidth: number, labelFontSize: number): { width: number; height: number } => {\n return {\n height: labelFontSize * 2.5 + 2 * LABEL_BLOCK_PADDING, // Assuming 2.5 lines per label\n width: labelWidth + 2 * NODE_LABEL_SPACING + 2 * LABEL_BLOCK_PADDING,\n }\n}\n\nexport function getLabelGroupXTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n config: SankeyConfigInterface<N, L>,\n width: number\n): number {\n const orientation = getLabelOrientation(d, width, config.labelPosition)\n switch (orientation) {\n case Position.Right: return config.nodeWidth + NODE_LABEL_SPACING\n case Position.Left:\n default:\n return -NODE_LABEL_SPACING\n }\n}\n\nexport function getLabelGroupYTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n labelGroupHeight: number,\n config: SankeyConfigInterface<N, L>\n): number {\n const nodeHeight = d.y1 - d.y0\n if (config.labelBackground && (nodeHeight < labelGroupHeight)) return (nodeHeight - labelGroupHeight) / 2\n\n switch (config.labelVerticalAlign) {\n case VerticalAlign.Bottom: return nodeHeight - labelGroupHeight\n case VerticalAlign.Middle: return nodeHeight / 2 - labelGroupHeight / 2\n case VerticalAlign.Top:\n default: return 0\n }\n}\n\nexport function getLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n config: SankeyConfigInterface<N, L>,\n width: number\n): string {\n const orientation = getLabelOrientation(d, width, config.labelPosition)\n switch (orientation) {\n case Position.Right: return 'start'\n case Position.Left:\n default:\n return 'end'\n }\n}\n\nexport function getSubLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n config: SankeyConfigInterface<N, L>,\n width: number\n): string {\n const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n const orientation = getLabelOrientation(d, width, config.labelPosition)\n switch (orientation) {\n case Position.Right: return isSublabelInline ? 'end' : 'start'\n case Position.Left:\n default:\n return isSublabelInline ? 'start' : 'end'\n }\n}\n\nexport function renderLabel<N extends SankeyInputNode, L extends SankeyInputLink> (\n labelGroup: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, any>,\n d: SankeyNode<N, L>,\n config: SankeyConfigInterface<N, L>,\n width: number,\n duration: number,\n forceExpand = false\n): { x: number; y: number; width: number; height: number; layer: number; selection: any; hidden?: boolean } {\n const labelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.label}`)\n const labelShowBackground = config.labelBackground || forceExpand\n const sublabelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.sublabel}`)\n const labelPadding = labelShowBackground ? LABEL_BLOCK_PADDING : 0\n const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n const separator = config.labelForceWordBreak ? '' : config.labelTextSeparator\n const fastEstimatesMode = true // Fast but inaccurate\n const fontWidthToHeightRatio = 0.52\n const dy = 0.32\n const labelOrientation = getLabelOrientation(d, width, config.labelPosition)\n const labelOrientationMult = labelOrientation === Position.Left ? -1 : 1\n const labelText = getString(d, config.label)\n const sublabelText = getString(d, config.subLabel)\n let wasTrimmed = false\n\n const labelFontSize = config.labelFontSize ?? getCSSVariableValueInPixels('var(--vis-sankey-node-label-font-size)', labelGroup.node())\n const subLabelFontSize = config.subLabelFontSize ?? getCSSVariableValueInPixels('var(--vis-sankey-node-sublabel-font-size)', labelGroup.node())\n\n // Render the main label, wrap / trim it and estimate its size\n const labelsFontSizeDifference = sublabelText ? labelFontSize - subLabelFontSize : 0\n const labelTranslateY = labelPadding + ((isSublabelInline && labelsFontSizeDifference < 0) ? -0.6 * labelsFontSizeDifference : 0)\n labelTextSelection\n .text(labelText)\n .attr('font-size', labelFontSize)\n .style('fill', getColor(d, config.labelColor))\n .attr('transform', `translate(${labelOrientationMult * labelPadding},${labelTranslateY})`)\n .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))\n\n const labelMaxWidth = isSublabelInline ? config.labelMaxWidth * (1 - (sublabelText ? config.subLabelToLabelInlineWidthRatio : 0)) : config.labelMaxWidth\n if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(labelTextSelection, labelMaxWidth, separator)\n else wasTrimmed = trimSVGText(labelTextSelection, labelMaxWidth, config.labelTrimMode, fastEstimatesMode, labelFontSize, fontWidthToHeightRatio)\n\n const labelSize = estimateTextSize(labelTextSelection, labelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)\n\n // Render the sub-label, wrap / trim it and estimate its size\n const sublabelTranslateX = labelOrientationMult * (labelPadding + (isSublabelInline ? config.labelMaxWidth : 0))\n const sublabelMarginTop = 0\n const sublabelTranslateY = labelPadding + (isSublabelInline\n ? (labelsFontSizeDifference > 0 ? 0.6 * labelsFontSizeDifference : 0)\n : labelSize.height + sublabelMarginTop)\n sublabelTextSelection\n .text(sublabelText)\n .attr('font-size', subLabelFontSize)\n .style('fill', getColor(d, config.subLabelColor))\n .attr('transform', `translate(${sublabelTranslateX},${sublabelTranslateY})`)\n .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))\n\n const sublabelMaxWidth = isSublabelInline ? config.labelMaxWidth * config.subLabelToLabelInlineWidthRatio : config.labelMaxWidth\n if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(sublabelTextSelection, sublabelMaxWidth, separator)\n else wasTrimmed = wasTrimmed || trimSVGText(sublabelTextSelection, sublabelMaxWidth, config.labelTrimMode, fastEstimatesMode, subLabelFontSize, fontWidthToHeightRatio)\n\n labelGroup.classed(s.labelTrimmed, wasTrimmed)\n const sublabelSize = estimateTextSize(sublabelTextSelection, subLabelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)\n\n // Draw the background if needed\n const labelGroupHeight = (isSublabelInline ? Math.max(labelSize.height, sublabelSize.height) : (labelSize.height + sublabelSize.height)) + 2 * labelPadding\n const labelBackground = labelGroup.select(`.${s.labelBackground}`)\n\n labelBackground\n .attr('d', labelShowBackground ? getLabelBackground(config.labelMaxWidth + 2 * labelPadding, labelGroupHeight, labelOrientation as (Position.Left | Position.Right)) : null)\n\n // Position the label\n const labelTextAnchor = getLabelTextAnchor(d, config, width)\n const sublabelTextAnchor = getSubLabelTextAnchor(d, config, width)\n const xTranslate = getLabelGroupXTranslate(d, config, width)\n const yTranslate = getLabelGroupYTranslate(d, labelGroupHeight, config)\n\n labelTextSelection.attr('text-anchor', labelTextAnchor)\n sublabelTextSelection.attr('text-anchor', sublabelTextAnchor)\n\n const hasTransform = !!labelGroup.attr('transform')\n smartTransition(labelGroup, hasTransform ? duration : 0)\n .attr('transform', `translate(${xTranslate},${yTranslate})`)\n\n return {\n x: d.x0 + xTranslate,\n y: d.y0 + yTranslate,\n width: config.labelMaxWidth,\n height: labelGroupHeight,\n layer: d.layer,\n selection: labelGroup,\n }\n}\n"],"names":["s.label","s.sublabel","s.labelTrimmed","labelBackground","s.labelBackground"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"label.js","sources":["../../../../src/components/sankey/modules/label.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\n\n// Utils\nimport { estimateTextSize, trimSVGText, wrapSVGText } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\nimport { getString, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { GenericAccessor } from 'types/accessor'\nimport { FitMode, VerticalAlign } from 'types/text'\nimport { Position } from 'types/position'\n\n// Local Types\nimport { SankeyInputLink, SankeyInputNode, SankeyNode, SankeySubLabelPlacement } from '../types'\n\n// Config\nimport { SankeyConfigInterface } from '../config'\n\n// Styles\nimport * as s from '../style'\n\n\nconst NODE_LABEL_SPACING = 10\nconst LABEL_BLOCK_PADDING = 6.5\n\nfunction getLabelBackground (\n width: number,\n height: number,\n orientation: Position.Left | Position.Right,\n arrowWidth = 5,\n arrowHeight = 8\n): string {\n const halfHeight = height / 2\n const halfArrowHeight = arrowHeight / 2\n\n if (orientation === Position.Left) {\n const rightArrowPos = `L 0 ${halfHeight - halfArrowHeight} L ${+arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`\n return `\n M 0 0\n ${rightArrowPos}\n L 0 ${height}\n L ${-width} ${height}\n L ${-width} 0\n L 0 0 `\n } else {\n const leftArrowPos = `L 0 ${halfHeight - halfArrowHeight} L ${-arrowWidth} ${halfHeight} L 0 ${halfHeight + halfArrowHeight}`\n return `\n M 0 0\n ${leftArrowPos}\n L 0 ${height}\n L ${width} ${height}\n L ${width} 0\n L 0 0 `\n }\n}\n\nexport function getLabelOrientation<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n sankeyWidth: number,\n labelPosition: GenericAccessor<Position.Auto | Position.Left | Position.Right | string, SankeyNode<N, L>>\n): (Position.Left | Position.Right) {\n let orientation = getValue(d, labelPosition)\n if (orientation === Position.Auto || !orientation) {\n orientation = d.x0 < sankeyWidth / 2 ? Position.Left : Position.Right\n }\n\n return orientation as (Position.Left | Position.Right)\n}\n\nexport const requiredLabelSpace = (labelWidth: number, labelFontSize: number): { width: number; height: number } => {\n return {\n height: labelFontSize * 2.5 + 2 * LABEL_BLOCK_PADDING, // Assuming 2.5 lines per label\n width: labelWidth + 2 * NODE_LABEL_SPACING + 2 * LABEL_BLOCK_PADDING,\n }\n}\n\nexport function getLabelGroupXTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n config: SankeyConfigInterface<N, L>,\n width: number\n): number {\n const orientation = getLabelOrientation(d, width, config.labelPosition)\n switch (orientation) {\n case Position.Right: return config.nodeWidth + NODE_LABEL_SPACING\n case Position.Left:\n default:\n return -NODE_LABEL_SPACING\n }\n}\n\nexport function getLabelGroupYTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n labelGroupHeight: number,\n config: SankeyConfigInterface<N, L>\n): number {\n const nodeHeight = d.y1 - d.y0\n if (config.labelBackground && (nodeHeight < labelGroupHeight)) return (nodeHeight - labelGroupHeight) / 2\n\n switch (config.labelVerticalAlign) {\n case VerticalAlign.Bottom: return nodeHeight - labelGroupHeight\n case VerticalAlign.Middle: return nodeHeight / 2 - labelGroupHeight / 2\n case VerticalAlign.Top:\n default: return 0\n }\n}\n\nexport function getLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n config: SankeyConfigInterface<N, L>,\n width: number\n): string {\n const orientation = getLabelOrientation(d, width, config.labelPosition)\n switch (orientation) {\n case Position.Right: return 'start'\n case Position.Left:\n default:\n return 'end'\n }\n}\n\nexport function getSubLabelTextAnchor<N extends SankeyInputNode, L extends SankeyInputLink> (\n d: SankeyNode<N, L>,\n config: SankeyConfigInterface<N, L>,\n width: number\n): string {\n const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n const orientation = getLabelOrientation(d, width, config.labelPosition)\n switch (orientation) {\n case Position.Right: return isSublabelInline ? 'end' : 'start'\n case Position.Left:\n default:\n return isSublabelInline ? 'start' : 'end'\n }\n}\n\nexport function renderLabel<N extends SankeyInputNode, L extends SankeyInputLink> (\n labelGroup: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, any>,\n d: SankeyNode<N, L>,\n config: SankeyConfigInterface<N, L>,\n width: number,\n duration: number,\n forceExpand = false\n): { x: number; y: number; width: number; height: number; layer: number; selection: any; hidden?: boolean } {\n const labelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.label}`)\n const labelShowBackground = config.labelBackground || forceExpand\n const sublabelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.sublabel}`)\n const labelPadding = labelShowBackground ? LABEL_BLOCK_PADDING : 0\n const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline\n const separator = config.labelForceWordBreak ? '' : config.labelTextSeparator\n const fastEstimatesMode = true // Fast but inaccurate\n const fontWidthToHeightRatio = 0.52\n const dy = 0.32\n const labelOrientation = getLabelOrientation(d, width, config.labelPosition)\n const labelOrientationMult = labelOrientation === Position.Left ? -1 : 1\n const labelText = getString(d, config.label)\n const sublabelText = getString(d, config.subLabel)\n let wasTrimmed = false\n\n const labelFontSize = config.labelFontSize ?? getCSSVariableValueInPixels('var(--vis-sankey-node-label-font-size)', labelGroup.node())\n const subLabelFontSize = config.subLabelFontSize ?? getCSSVariableValueInPixels('var(--vis-sankey-node-sublabel-font-size)', labelGroup.node())\n\n // Render the main label, wrap / trim it and estimate its size\n const labelsFontSizeDifference = sublabelText ? labelFontSize - subLabelFontSize : 0\n const labelTranslateY = labelPadding + ((isSublabelInline && labelsFontSizeDifference < 0) ? -0.6 * labelsFontSizeDifference : 0)\n labelTextSelection\n .text(labelText)\n .attr('font-size', labelFontSize)\n .style('fill', getColor(d, config.labelColor))\n .attr('transform', `translate(${labelOrientationMult * labelPadding},${labelTranslateY})`)\n .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))\n\n const labelMaxWidth = isSublabelInline ? config.labelMaxWidth * (1 - (sublabelText ? config.subLabelToLabelInlineWidthRatio : 0)) : config.labelMaxWidth\n if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(labelTextSelection, labelMaxWidth, separator)\n else wasTrimmed = trimSVGText(labelTextSelection, labelMaxWidth, config.labelTrimMode, fastEstimatesMode, labelFontSize, fontWidthToHeightRatio)\n\n const labelSize = estimateTextSize(labelTextSelection, labelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)\n\n // Render the sub-label, wrap / trim it and estimate its size\n const sublabelTranslateX = labelOrientationMult * (labelPadding + (isSublabelInline ? config.labelMaxWidth : 0))\n const sublabelMarginTop = 0\n const sublabelTranslateY = labelPadding + (isSublabelInline\n ? (labelsFontSizeDifference > 0 ? 0.6 * labelsFontSizeDifference : 0)\n : labelSize.height + sublabelMarginTop)\n sublabelTextSelection\n .text(sublabelText)\n .attr('font-size', subLabelFontSize)\n .style('fill', getColor(d, config.subLabelColor))\n .attr('transform', `translate(${sublabelTranslateX},${sublabelTranslateY})`)\n .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))\n\n const sublabelMaxWidth = isSublabelInline ? config.labelMaxWidth * config.subLabelToLabelInlineWidthRatio : config.labelMaxWidth\n if (config.labelFit === FitMode.Wrap || forceExpand) wrapSVGText(sublabelTextSelection, sublabelMaxWidth, separator)\n else wasTrimmed = wasTrimmed || trimSVGText(sublabelTextSelection, sublabelMaxWidth, config.labelTrimMode, fastEstimatesMode, subLabelFontSize, fontWidthToHeightRatio)\n\n labelGroup.classed(s.labelTrimmed, wasTrimmed)\n const sublabelSize = estimateTextSize(sublabelTextSelection, subLabelFontSize, dy, fastEstimatesMode, fontWidthToHeightRatio)\n\n // Draw the background if needed\n const labelGroupHeight = (isSublabelInline ? Math.max(labelSize.height, sublabelSize.height) : (labelSize.height + sublabelSize.height)) + 2 * labelPadding\n const labelBackground = labelGroup.select(`.${s.labelBackground}`)\n\n labelBackground\n .attr('d', labelShowBackground ? getLabelBackground(config.labelMaxWidth + 2 * labelPadding, labelGroupHeight, labelOrientation as (Position.Left | Position.Right)) : null)\n\n // Position the label\n const labelTextAnchor = getLabelTextAnchor(d, config, width)\n const sublabelTextAnchor = getSubLabelTextAnchor(d, config, width)\n const xTranslate = getLabelGroupXTranslate(d, config, width)\n const yTranslate = getLabelGroupYTranslate(d, labelGroupHeight, config)\n\n labelTextSelection.attr('text-anchor', labelTextAnchor)\n sublabelTextSelection.attr('text-anchor', sublabelTextAnchor)\n\n const hasTransform = !!labelGroup.attr('transform')\n smartTransition(labelGroup, hasTransform ? duration : 0)\n .attr('transform', `translate(${xTranslate},${yTranslate})`)\n\n return {\n x: d.x0 + xTranslate,\n y: d.y0 + yTranslate,\n width: config.labelMaxWidth,\n height: labelGroupHeight,\n layer: d.layer,\n selection: labelGroup,\n }\n}\n"],"names":["s.label","s.sublabel","s.labelTrimmed","labelBackground","s.labelBackground"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.js","sources":["../../../../src/components/sankey/modules/link.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolateNumber } from 'd3-interpolate'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { getString } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { SankeyInputLink, SankeyInputNode, SankeyLink } from '../types'\n\n// Config\nimport { SankeyConfigInterface } from '../config'\n\n// Styles\nimport * as s from '../style'\n\nexport type LinkPathOptions = {\n x0: number;\n x1: number;\n y0: number;\n y1: number;\n width: number;\n}\n\nexport function linkPath ({ x0, x1, y0, y1, width }: LinkPathOptions): string {\n const top0 = y0 - width / 2\n const top1 = y1 - width / 2\n const bottom0 = y0 + width / 2\n const bottom1 = y1 + width / 2\n const centerX = (x0 + x1) / 2\n\n return `\n M ${x0}, ${top0}\n\n C ${centerX}, ${top0}\n ${centerX}, ${top1}\n ${x1}, ${top1}\n\n L ${x1}, ${bottom1}\n\n C ${centerX}, ${bottom1}\n ${centerX}, ${bottom0}\n ${x0}, ${bottom0}\n z\n `\n}\n\nexport type LinkAnimState = { x0: number; x1: number; y0: number; y1: number; width: number }\n\nexport interface LinkElement extends SVGPathElement {\n _animState?: LinkAnimState;\n}\n\nexport function createLinks<N extends SankeyInputNode, L extends SankeyInputLink> (\n sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>\n): void {\n sel.append('path').attr('class', s.linkPath)\n .attr('d', (d: SankeyLink<N, L>, i: number, el: ArrayLike<LinkElement>) => {\n el[i]._animState = {\n x0: d.source.x1,\n x1: d.target.x0,\n y0: d.y0,\n y1: d.y1,\n width: Math.max(1, d.width),\n }\n return linkPath(el[i]._animState)\n })\n sel.append('path').attr('class', s.linkSelectionHelper)\n sel.style('opacity', 0)\n}\n\nexport function updateLinks<N extends SankeyInputNode, L extends SankeyInputLink> (\n sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>,\n config: SankeyConfigInterface<N, L>,\n duration: number\n): void {\n smartTransition(sel, duration)\n .style('opacity', (d: SankeyLink<N, L>) => d._state.greyout ? 0.2 : 1)\n\n const linkSelection = sel.select<SVGPathElement>(`.${s.linkPath}`)\n .style('cursor', (d: SankeyLink<N, L>) => getString(d, config.linkCursor))\n\n const selectionTransition = smartTransition(linkSelection, duration)\n .style('fill', (link: SankeyLink<N, L>) => getColor(link, config.linkColor))\n\n if (duration) {\n (selectionTransition as Transition<SVGPathElement, SankeyLink<N, L>, SVGGElement, unknown>)\n .attrTween('d', (d: SankeyLink<N, L>, i: number, el: ArrayLike<LinkElement>) => {\n const previous = el[i]._animState\n const next = {\n x0: d.source.x1,\n x1: d.target.x0,\n y0: d.y0,\n y1: d.y1,\n width: Math.max(1, d.width),\n }\n const interpolator = {\n x0: interpolateNumber(previous.x0, next.x0),\n x1: interpolateNumber(previous.x1, next.x1),\n y0: interpolateNumber(previous.y0, next.y0),\n y1: interpolateNumber(previous.y1, next.y1),\n width: interpolateNumber(previous.width, next.width),\n }\n el[i]._animState = next\n\n return function (t: number) {\n return linkPath({\n x0: interpolator.x0(t),\n x1: interpolator.x1(t),\n y0: interpolator.y0(t),\n y1: interpolator.y1(t),\n width: interpolator.width(t),\n })\n }\n })\n } else {\n linkSelection.attr('d', (d: SankeyLink<N, L>) => linkPath({\n x0: d.source.x1,\n x1: d.target.x0,\n y0: d.y0,\n y1: d.y1,\n width: Math.max(1, d.width),\n }))\n }\n\n sel.select(`.${s.linkSelectionHelper}`)\n .attr('d', (d: SankeyLink<N, L>) => linkPath({\n x0: d.source.x1,\n x1: d.target.x0,\n y0: d.y0,\n y1: d.y1,\n width: Math.max(10, d.width),\n }))\n .style('cursor', d => getString(d, config.linkCursor))\n}\n\nexport function removeLinks<N extends SankeyInputNode, L extends SankeyInputLink> (\n sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>\n): void {\n sel.remove()\n}\n"],"names":["s.linkPath","s.linkSelectionHelper"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"link.js","sources":["../../../../src/components/sankey/modules/link.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolateNumber } from 'd3-interpolate'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { getString } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { SankeyInputLink, SankeyInputNode, SankeyLink } from '../types'\n\n// Config\nimport { SankeyConfigInterface } from '../config'\n\n// Styles\nimport * as s from '../style'\n\nexport type LinkPathOptions = {\n x0: number;\n x1: number;\n y0: number;\n y1: number;\n width: number;\n}\n\nexport function linkPath ({ x0, x1, y0, y1, width }: LinkPathOptions): string {\n const top0 = y0 - width / 2\n const top1 = y1 - width / 2\n const bottom0 = y0 + width / 2\n const bottom1 = y1 + width / 2\n const centerX = (x0 + x1) / 2\n\n return `\n M ${x0}, ${top0}\n\n C ${centerX}, ${top0}\n ${centerX}, ${top1}\n ${x1}, ${top1}\n\n L ${x1}, ${bottom1}\n\n C ${centerX}, ${bottom1}\n ${centerX}, ${bottom0}\n ${x0}, ${bottom0}\n z\n `\n}\n\nexport type LinkAnimState = { x0: number; x1: number; y0: number; y1: number; width: number }\n\nexport interface LinkElement extends SVGPathElement {\n _animState?: LinkAnimState;\n}\n\nexport function createLinks<N extends SankeyInputNode, L extends SankeyInputLink> (\n sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>\n): void {\n sel.append('path').attr('class', s.linkPath)\n .attr('d', (d: SankeyLink<N, L>, i: number, el: ArrayLike<LinkElement>) => {\n el[i]._animState = {\n x0: d.source.x1,\n x1: d.target.x0,\n y0: d.y0,\n y1: d.y1,\n width: Math.max(1, d.width),\n }\n return linkPath(el[i]._animState)\n })\n sel.append('path').attr('class', s.linkSelectionHelper)\n sel.style('opacity', 0)\n}\n\nexport function updateLinks<N extends SankeyInputNode, L extends SankeyInputLink> (\n sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>,\n config: SankeyConfigInterface<N, L>,\n duration: number\n): void {\n smartTransition(sel, duration)\n .style('opacity', (d: SankeyLink<N, L>) => d._state.greyout ? 0.2 : 1)\n\n const linkSelection = sel.select<SVGPathElement>(`.${s.linkPath}`)\n .style('cursor', (d: SankeyLink<N, L>) => getString(d, config.linkCursor))\n\n const selectionTransition = smartTransition(linkSelection, duration)\n .style('fill', (link: SankeyLink<N, L>) => getColor(link, config.linkColor))\n\n if (duration) {\n (selectionTransition as Transition<SVGPathElement, SankeyLink<N, L>, SVGGElement, unknown>)\n .attrTween('d', (d: SankeyLink<N, L>, i: number, el: ArrayLike<LinkElement>) => {\n const previous = el[i]._animState\n const next = {\n x0: d.source.x1,\n x1: d.target.x0,\n y0: d.y0,\n y1: d.y1,\n width: Math.max(1, d.width),\n }\n const interpolator = {\n x0: interpolateNumber(previous.x0, next.x0),\n x1: interpolateNumber(previous.x1, next.x1),\n y0: interpolateNumber(previous.y0, next.y0),\n y1: interpolateNumber(previous.y1, next.y1),\n width: interpolateNumber(previous.width, next.width),\n }\n el[i]._animState = next\n\n return function (t: number) {\n return linkPath({\n x0: interpolator.x0(t),\n x1: interpolator.x1(t),\n y0: interpolator.y0(t),\n y1: interpolator.y1(t),\n width: interpolator.width(t),\n })\n }\n })\n } else {\n linkSelection.attr('d', (d: SankeyLink<N, L>) => linkPath({\n x0: d.source.x1,\n x1: d.target.x0,\n y0: d.y0,\n y1: d.y1,\n width: Math.max(1, d.width),\n }))\n }\n\n sel.select(`.${s.linkSelectionHelper}`)\n .attr('d', (d: SankeyLink<N, L>) => linkPath({\n x0: d.source.x1,\n x1: d.target.x0,\n y0: d.y0,\n y1: d.y1,\n width: Math.max(10, d.width),\n }))\n .style('cursor', d => getString(d, config.linkCursor))\n}\n\nexport function removeLinks<N extends SankeyInputNode, L extends SankeyInputLink> (\n sel: Selection<SVGGElement, SankeyLink<N, L>, SVGGElement, unknown>\n): void {\n sel.remove()\n}\n"],"names":["s.linkPath","s.linkSelectionHelper"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/sankey/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const SANKEY_ICON_SIZE = 22\n\nexport const root = css`\n label: sankey-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n /* Links */\n --vis-sankey-link-cursor: default;\n --vis-sankey-link-color: var(--vis-color-main-light);\n --vis-sankey-link-opacity: 0.5;\n --vis-sankey-link-hover-opacity: 1.0;\n /* Nodes */\n --vis-sankey-node-cursor: default;\n --vis-sankey-node-color: var(--vis-color-main);\n --vis-sankey-node-label-color: #575c65;\n --vis-sankey-node-opacity: 0.9;\n --vis-sankey-node-hover-opacity: 1.0;\n /* Node Labels */\n --vis-sankey-node-label-background-fill-color: #ffffff;\n --vis-sankey-node-label-background-stroke-color: #eaeaea;\n --vis-sankey-node-label-background-opacity: 0.9;\n --vis-sankey-node-label-color: #575c65;\n --vis-sankey-node-label-cursor: default;\n --vis-sankey-node-label-font-weight: 600;\n --vis-sankey-node-label-font-size: 12px;\n --vis-sankey-node-label-text-decoration: none;\n\n --vis-sankey-node-sublabel-font-size: 10px;\n --vis-sankey-node-sublabel-font-weight: 500;\n\n /* Icons */\n --vis-sankey-icon-size: ${SANKEY_ICON_SIZE}px;\n --vis-sankey-icon-color: #ffffff;\n --vis-sankey-icon-stroke-opacity: 0.6;\n --vis-sankey-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-sankey-label-font-family: */\n\n /* Dark Theme */\n --vis-dark-sankey-link-color: var(--vis-color-main-dark);\n --vis-dark-sankey-node-color: var(--vis-color-main);\n --vis-dark-sankey-node-label-color: #eaeaea;\n --vis-dark-sankey-node-label-background-fill-color: #292b34;\n --vis-dark-sankey-node-label-background-stroke-color: #575c65;\n --vis-dark-sankey-icon-color: #292b34;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-sankey-node-color: var(--vis-dark-sankey-node-color);\n --vis-sankey-link-color: var(--vis-dark-sankey-link-color);\n --vis-sankey-node-label-color: var(--vis-dark-sankey-node-label-color);\n --vis-sankey-node-label-background-fill-color: var(--vis-dark-sankey-label-background-fill-color);\n --vis-sankey-node-label-background-stroke-color: var(--vis-dark-sankey-label-background-stroke-color);\n --vis-sankey-icon-color: var(--vis-dark-sankey-icon-color);\n }\n`\n\nexport const links = css`\n label: links;\n`\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const link = css`\n label: link;\n\n path {\n cursor: var(--vis-sankey-link-cursor);\n fill: var(--vis-sankey-link-color);\n fill-opacity: var(--vis-sankey-link-opacity);\n }\n\n &:hover {\n path {\n fill-opacity: var(--vis-sankey-link-hover-opacity);\n }\n }\n`\n\nexport const linkPath = css`\n label: visible;\n`\n\nexport const linkSelectionHelper = css`\n label: transparent;\n opacity: 0;\n`\n\nexport const labelGroup = css`\n label: label-group;\n cursor: var(--vis-sankey-node-label-cursor);\n`\n\nexport const labelTrimmed = css`\n label: label-trimmed;\n`\n\nexport const label = css`\n label: label;\n dominant-baseline: hanging;\n\n fill: var(--vis-sankey-node-label-color);\n text-decoration: var(--vis-sankey-node-label-text-decoration);\n font-weight: var(--vis-sankey-node-label-font-weight);\n user-select: none;\n\n &, tspan {\n font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));\n dominant-baseline: hanging;\n }\n`\n\nexport const sublabel = css`\n label: sub-label;\n dominant-baseline: hanging;\n\n fill: var(--vis-sankey-node-label-color);\n user-select: none;\n\n &, tspan {\n font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));\n font-weight: var(--vis-sankey-node-sublabel-font-weight);\n dominant-baseline: hanging;\n }\n`\n\nexport const labelBackground = css`\n label: label-background;\n stroke: var(--vis-sankey-node-label-background-stroke-color);\n fill: var(--vis-sankey-node-label-background-fill-color);\n opacity: var(--vis-sankey-node-label-background-opacity);\n`\n\nexport const hidden = css`\n label: hidden;\n visibility: hidden;\n`\n\nexport const forceShow = css`\n label: forceShow;\n visibility: visible;\n`\n\nexport const nodeGroup = css`\n label: node-group;\n`\n\nexport const node = css`\n label: node;\n\n cursor: var(--vis-sankey-node-cursor);\n fill: var(--vis-sankey-node-color);\n opacity: var(--vis-sankey-node-opacity);\n\n &:hover {\n opacity: var(--vis-sankey-node-hover-opacity);\n }\n`\n\nexport const nodeIcon = css`\n label: icon;\n\n font-family: var(--vis-sankey-icon-font-family);\n text-anchor: middle;\n font-size: var(--vis-sankey-icon-size);\n fill: var(--vis-sankey-node-icon-color);\n stroke: var(--vis-sankey-node-color);\n stroke-opacity: var(--vis-sankey-icon-stroke-opacity);\n user-select: none;\n pointer-events: none;\n`\n\nexport const nodeExit = css`\n label: node-exit;\n`\n\nexport const background = css`\n label: background;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,gBAAgB,GAAG,GAAE;AAE3B,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA2BP,gBAAgB,CAAA;;;qCAGT,+BAA+B,CAAA;;;;;;;;;;;;;;AAchD,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;EAQ7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;EAEvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;;;;EActB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA;;EAE1B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;EAGrC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;;EAG5B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;EAE9B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;EAavB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;;EAY1B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;EAKjC;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;;EAGxB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;;EAG3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;;;;EAW1B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA;;EAE1B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/sankey/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const SANKEY_ICON_SIZE = 22\n\nexport const root = css`\n label: sankey-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n /* Links */\n --vis-sankey-link-cursor: default;\n --vis-sankey-link-color: var(--vis-color-main-light);\n --vis-sankey-link-opacity: 0.5;\n --vis-sankey-link-hover-opacity: 1.0;\n /* Nodes */\n --vis-sankey-node-cursor: default;\n --vis-sankey-node-color: var(--vis-color-main);\n --vis-sankey-node-label-color: #575c65;\n --vis-sankey-node-opacity: 0.9;\n --vis-sankey-node-hover-opacity: 1.0;\n /* Node Labels */\n --vis-sankey-node-label-background-fill-color: #ffffff;\n --vis-sankey-node-label-background-stroke-color: #eaeaea;\n --vis-sankey-node-label-background-opacity: 0.9;\n --vis-sankey-node-label-color: #575c65;\n --vis-sankey-node-label-cursor: default;\n --vis-sankey-node-label-font-weight: 600;\n --vis-sankey-node-label-font-size: 12px;\n --vis-sankey-node-label-text-decoration: none;\n\n --vis-sankey-node-sublabel-font-size: 10px;\n --vis-sankey-node-sublabel-font-weight: 500;\n\n /* Icons */\n --vis-sankey-icon-size: ${SANKEY_ICON_SIZE}px;\n --vis-sankey-icon-color: #ffffff;\n --vis-sankey-icon-stroke-opacity: 0.6;\n --vis-sankey-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-sankey-label-font-family: */\n\n /* Dark Theme */\n --vis-dark-sankey-link-color: var(--vis-color-main-dark);\n --vis-dark-sankey-node-color: var(--vis-color-main);\n --vis-dark-sankey-node-label-color: #eaeaea;\n --vis-dark-sankey-node-label-background-fill-color: #292b34;\n --vis-dark-sankey-node-label-background-stroke-color: #575c65;\n --vis-dark-sankey-icon-color: #292b34;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-sankey-node-color: var(--vis-dark-sankey-node-color);\n --vis-sankey-link-color: var(--vis-dark-sankey-link-color);\n --vis-sankey-node-label-color: var(--vis-dark-sankey-node-label-color);\n --vis-sankey-node-label-background-fill-color: var(--vis-dark-sankey-label-background-fill-color);\n --vis-sankey-node-label-background-stroke-color: var(--vis-dark-sankey-label-background-stroke-color);\n --vis-sankey-icon-color: var(--vis-dark-sankey-icon-color);\n }\n`\n\nexport const links = css`\n label: links;\n`\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const link = css`\n label: link;\n\n path {\n cursor: var(--vis-sankey-link-cursor);\n fill: var(--vis-sankey-link-color);\n fill-opacity: var(--vis-sankey-link-opacity);\n }\n\n &:hover {\n path {\n fill-opacity: var(--vis-sankey-link-hover-opacity);\n }\n }\n`\n\nexport const linkPath = css`\n label: visible;\n`\n\nexport const linkSelectionHelper = css`\n label: transparent;\n opacity: 0;\n`\n\nexport const labelGroup = css`\n label: label-group;\n cursor: var(--vis-sankey-node-label-cursor);\n`\n\nexport const labelTrimmed = css`\n label: label-trimmed;\n`\n\nexport const label = css`\n label: label;\n dominant-baseline: hanging;\n\n fill: var(--vis-sankey-node-label-color);\n text-decoration: var(--vis-sankey-node-label-text-decoration);\n font-weight: var(--vis-sankey-node-label-font-weight);\n user-select: none;\n\n &, tspan {\n font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));\n dominant-baseline: hanging;\n }\n`\n\nexport const sublabel = css`\n label: sub-label;\n dominant-baseline: hanging;\n\n fill: var(--vis-sankey-node-label-color);\n user-select: none;\n\n &, tspan {\n font-family: var(--vis-sankey-label-font-family, var(--vis-font-family));\n font-weight: var(--vis-sankey-node-sublabel-font-weight);\n dominant-baseline: hanging;\n }\n`\n\nexport const labelBackground = css`\n label: label-background;\n stroke: var(--vis-sankey-node-label-background-stroke-color);\n fill: var(--vis-sankey-node-label-background-fill-color);\n opacity: var(--vis-sankey-node-label-background-opacity);\n`\n\nexport const hidden = css`\n label: hidden;\n visibility: hidden;\n`\n\nexport const forceShow = css`\n label: forceShow;\n visibility: visible;\n`\n\nexport const nodeGroup = css`\n label: node-group;\n`\n\nexport const node = css`\n label: node;\n\n cursor: var(--vis-sankey-node-cursor);\n fill: var(--vis-sankey-node-color);\n opacity: var(--vis-sankey-node-opacity);\n\n &:hover {\n opacity: var(--vis-sankey-node-hover-opacity);\n }\n`\n\nexport const nodeIcon = css`\n label: icon;\n\n font-family: var(--vis-sankey-icon-font-family);\n text-anchor: middle;\n font-size: var(--vis-sankey-icon-size);\n fill: var(--vis-sankey-node-icon-color);\n stroke: var(--vis-sankey-node-color);\n stroke-opacity: var(--vis-sankey-icon-stroke-opacity);\n user-select: none;\n pointer-events: none;\n`\n\nexport const nodeExit = css`\n label: node-exit;\n`\n\nexport const background = css`\n label: background;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,gBAAgB,GAAG,GAAE;AAE3B,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA2BP,gBAAgB,CAAA;;;qCAGT,+BAA+B,CAAA;;;;;;;;;;;;;;AAchD,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;EAQ7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;EActB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;EAGrC;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAavB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;EAY1B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;EAKjC;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;EAGxB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAW1B;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/scatter/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-scatter-cursor: default;\n --vis-scatter-fill-color: var(--vis-color-main);\n --vis-scatter-stroke-color: 'none';\n --vis-scatter-stroke-width: 1px;\n --vis-scatter-fill-opacity: 1;\n --vis-scatter-stroke-opacity: 1;\n --vis-scatter-hover-stroke-width: 2px;\n\n --vis-scatter-point-label-text-color-dark: #5b5f6d;\n --vis-scatter-point-label-text-color-light: #fff;\n --vis-scatter-point-label-text-font-weight: 500;\n --vis-scatter-point-label-text-font-size: 12px;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-scatter-point-label-text-font-family: */\n }\n`\n\nexport const root = css`\n label: scatter-component;\n`\n\nexport const pointGroup = css`\n label: point-group;\n`\n\nexport const pointGroupExit = css`\n label: point-group-exit;\n`\n\nexport const point = css`\n label: point;\n\n > path {\n cursor: var(--vis-scatter-cursor);\n fill: var(--vis-scatter-fill-color);\n fill-opacity: var(--vis-scatter-fill-opacity);\n stroke-opacity: var(--vis-scatter-stroke-opacity);\n stroke-width: var(--vis-scatter-stroke-width);\n stroke: var(--vis-scatter-stroke-color);\n\n &:hover {\n stroke-width: var(--vis-scatter-hover-stroke-width);\n }\n }\n\n > text {\n font-weight: var(--vis-scatter-point-label-text-font-weight);\n font-size: var(--vis-scatter-point-label-text-font-size);\n font-family: var(--vis-scatter-point-label-text-font-family, var(--vis-font-family));\n fill: var(--vis-scatter-point-label-text-color-dark);\n user-select: none;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;EAiBvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;EAE5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA;;EAEhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/scatter/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-scatter-cursor: default;\n --vis-scatter-fill-color: var(--vis-color-main);\n --vis-scatter-stroke-color: 'none';\n --vis-scatter-stroke-width: 1px;\n --vis-scatter-fill-opacity: 1;\n --vis-scatter-stroke-opacity: 1;\n --vis-scatter-hover-stroke-width: 2px;\n\n --vis-scatter-point-label-text-color-dark: #5b5f6d;\n --vis-scatter-point-label-text-color-light: #fff;\n --vis-scatter-point-label-text-font-weight: 500;\n --vis-scatter-point-label-text-font-size: 12px;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-scatter-point-label-text-font-family: */\n }\n`\n\nexport const root = css`\n label: scatter-component;\n`\n\nexport const pointGroup = css`\n label: point-group;\n`\n\nexport const pointGroupExit = css`\n label: point-group-exit;\n`\n\nexport const point = css`\n label: point;\n\n > path {\n cursor: var(--vis-scatter-cursor);\n fill: var(--vis-scatter-fill-color);\n fill-opacity: var(--vis-scatter-fill-opacity);\n stroke-opacity: var(--vis-scatter-stroke-opacity);\n stroke-width: var(--vis-scatter-stroke-width);\n stroke: var(--vis-scatter-stroke-color);\n\n &:hover {\n stroke-width: var(--vis-scatter-hover-stroke-width);\n }\n }\n\n > text {\n font-weight: var(--vis-scatter-point-label-text-font-weight);\n font-size: var(--vis-scatter-point-label-text-font-size);\n font-family: var(--vis-scatter-point-label-text-font-family, var(--vis-font-family));\n fill: var(--vis-scatter-point-label-text-color-dark);\n user-select: none;\n }\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;;EAE5B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/stacked-bar/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: stacked-bar-component;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-stacked-bar-cursor: default;\n --vis-stacked-bar-fill-color: var(--vis-color-main);\n --vis-stacked-bar-stroke-color: none;\n --vis-stacked-bar-stroke-width: 0px;\n --vis-stacked-bar-hover-stroke-width: none;\n --vis-stacked-bar-hover-stroke-color: none;\n\n /* Dark Theme */\n --vis-dark-stacked-bar-stroke-color: none;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-stacked-bar-stroke-color: var(--vis-dark-stacked-bar-stroke-color);\n }\n`\n\nexport const bar = css`\n label: bar;\n fill: var(--vis-stacked-bar-fill-color);\n stroke: var(--vis-stacked-bar-stroke-color);\n stroke-width: var(--vis-stacked-bar-stroke-width);\n cursor: var(--vis-stacked-bar-cursor);\n\n &:hover {\n stroke-width: var(--vis-stacked-bar-hover-stroke-width);\n stroke: var(--vis-stacked-bar-hover-stroke-color);\n }\n`\n\nexport const barGroup = css`\n label: barGroup;\n`\n\nexport const barGroupExit = css`\n label: barGroupExit;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;AAapB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAG7B;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA;;;;;;;;;;;EAWrB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA;;EAE1B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/stacked-bar/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: stacked-bar-component;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-stacked-bar-cursor: default;\n --vis-stacked-bar-fill-color: var(--vis-color-main);\n --vis-stacked-bar-stroke-color: none;\n --vis-stacked-bar-stroke-width: 0px;\n --vis-stacked-bar-hover-stroke-width: none;\n --vis-stacked-bar-hover-stroke-color: none;\n\n /* Dark Theme */\n --vis-dark-stacked-bar-stroke-color: none;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-stacked-bar-stroke-color: var(--vis-dark-stacked-bar-stroke-color);\n }\n`\n\nexport const bar = css`\n label: bar;\n fill: var(--vis-stacked-bar-fill-color);\n stroke: var(--vis-stacked-bar-stroke-color);\n stroke-width: var(--vis-stacked-bar-stroke-width);\n cursor: var(--vis-stacked-bar-cursor);\n\n &:hover {\n stroke-width: var(--vis-stacked-bar-hover-stroke-width);\n stroke: var(--vis-stacked-bar-hover-stroke-color);\n }\n`\n\nexport const barGroup = css`\n label: barGroup;\n`\n\nexport const barGroupExit = css`\n label: barGroupExit;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;AAapB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAG7B;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWrB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;EAE1B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;"}
|
|
@@ -1,83 +1,32 @@
|
|
|
1
1
|
import { XYComponentConfigInterface } from "../../core/xy-component/config";
|
|
2
2
|
import { WithOptional } from "../../types/misc";
|
|
3
|
-
import { ColorAccessor, NumericAccessor, StringAccessor
|
|
4
|
-
import { TextAlign } from "../../types/text";
|
|
5
|
-
import { Arrangement } from "../../types/position";
|
|
6
|
-
import type { TimelineArrow, TimelineLineRenderState, TimelineRowIcon, TimelineRowLabel } from './types';
|
|
3
|
+
import { ColorAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
|
|
7
4
|
export interface TimelineConfigInterface<Datum> extends WithOptional<XYComponentConfigInterface<Datum>, 'y'> {
|
|
8
|
-
/** @deprecated This property has been renamed to `key` */
|
|
9
|
-
type?: StringAccessor<Datum>;
|
|
10
|
-
/** @deprecated This property has been renamed to `lineDuration` */
|
|
11
|
-
length?: NumericAccessor<Datum>;
|
|
12
|
-
/** @deprecated This property has been renamed to `lineCursor` */
|
|
13
|
-
cursor?: StringAccessor<Datum>;
|
|
14
|
-
/** Timeline item row accessor function. Records with the `lineRow` will be plotted in one row. Default: `undefined` */
|
|
15
|
-
lineRow?: StringAccessor<Datum>;
|
|
16
|
-
/** Timeline item duration accessor function. Default: `undefined`. Falls back to the deprecated `length` property */
|
|
17
|
-
lineDuration?: NumericAccessor<Datum>;
|
|
18
5
|
/** Timeline item color accessor function. Default: `d => d.color` */
|
|
19
6
|
color?: ColorAccessor<Datum>;
|
|
20
7
|
/** Width of the timeline items. Default: `8` */
|
|
21
8
|
lineWidth?: NumericAccessor<Datum>;
|
|
22
9
|
/** Display rounded ends for timeline items. Default: `true` */
|
|
23
10
|
lineCap?: boolean;
|
|
24
|
-
/** Provide a href to an SVG defined in container's `svgDefs` to display an icon at the start of the line. Default: undefined */
|
|
25
|
-
lineStartIcon?: StringAccessor<Datum>;
|
|
26
|
-
/** Line start icon color accessor function. Default: `undefined` */
|
|
27
|
-
lineStartIconColor?: StringAccessor<Datum>;
|
|
28
|
-
/** Line start icon size accessor function. Default: `undefined` */
|
|
29
|
-
lineStartIconSize?: NumericAccessor<Datum>;
|
|
30
|
-
/** Line start icon arrangement configuration. Controls how the icon is positioned relative to the line.
|
|
31
|
-
* Accepts values from the Arrangement enum: `Arrangement.Start`, `Arrangement.Middle`, `Arrangement.End` or a string equivalent.
|
|
32
|
-
* Default: `Arrangement.Inside` */
|
|
33
|
-
lineStartIconArrangement?: GenericAccessor<Arrangement | `${Arrangement}`, Datum>;
|
|
34
|
-
/** Provide a href to an SVG defined in container's `svgDefs` to display an icon at the end of the line. Default: undefined */
|
|
35
|
-
lineEndIcon?: StringAccessor<Datum>;
|
|
36
|
-
/** Line end icon color accessor function. Default: `undefined` */
|
|
37
|
-
lineEndIconColor?: StringAccessor<Datum>;
|
|
38
|
-
/** Line end icon size accessor function. Default: `undefined` */
|
|
39
|
-
lineEndIconSize?: NumericAccessor<Datum>;
|
|
40
|
-
/** Line end icon arrangement configuration. Controls how the icon is positioned relative to the line.
|
|
41
|
-
* Accepts values from the Arrangement enum: `Arrangement.Start`, `Arrangement.Middle`, `Arrangement.End` or a string equivalent.
|
|
42
|
-
* Default: `Arrangement.Inside` */
|
|
43
|
-
lineEndIconArrangement?: GenericAccessor<Arrangement | `${Arrangement}`, Datum>;
|
|
44
|
-
/** Configurable Timeline item cursor when hovering over. Default: `undefined` */
|
|
45
|
-
lineCursor?: StringAccessor<Datum>;
|
|
46
|
-
/** Sets the minimum line length to 1 pixel for better visibility of small values. Default: `false` */
|
|
47
|
-
showEmptySegments?: boolean;
|
|
48
11
|
/** Timeline row height. Default: `22` */
|
|
49
12
|
rowHeight?: number;
|
|
50
|
-
/**
|
|
51
|
-
|
|
52
|
-
/**
|
|
13
|
+
/** Timeline item length accessor function. Default: `d => d.length` */
|
|
14
|
+
length?: NumericAccessor<Datum>;
|
|
15
|
+
/** Timeline item type accessor function. Records of one type will be plotted in one row. Default: `d => d.type` */
|
|
16
|
+
type?: StringAccessor<Datum>;
|
|
17
|
+
/** Configurable Timeline item cursor when hovering over. Default: `null` */
|
|
18
|
+
cursor?: StringAccessor<Datum>;
|
|
19
|
+
/** Show item type labels when set to `true`. Default: `false` */
|
|
53
20
|
showLabels?: boolean;
|
|
54
|
-
/**
|
|
21
|
+
/** Fixed label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined` */
|
|
55
22
|
labelWidth?: number;
|
|
56
|
-
/**
|
|
23
|
+
/** Maximum label width in pixels. Labels longer than the specified value will be trimmed. Default: `120` */
|
|
57
24
|
maxLabelWidth?: number;
|
|
58
|
-
/**
|
|
59
|
-
|
|
60
|
-
/** Row label style as an object with the `{ [property-name]: value }` format. Default: `undefined` */
|
|
61
|
-
rowLabelStyle?: GenericAccessor<Record<string, string>, TimelineRowLabel<Datum>>;
|
|
62
|
-
/** Row label formatter function. Default: `undefined` */
|
|
63
|
-
rowLabelFormatter?: (key: string, items: Datum[], i: number) => string;
|
|
64
|
-
/** Provide an icon href to be displayed before the row label. Default: `undefined` */
|
|
65
|
-
rowIcon?: (key: string, items: Datum[], i: number) => TimelineRowIcon | undefined;
|
|
66
|
-
/** Fixed label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined`. Falls back to deprecated `labelWidth`. */
|
|
67
|
-
rowLabelWidth?: number;
|
|
68
|
-
/** Maximum label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined`. Falls back to deprecated `maxLabelWidth`. */
|
|
69
|
-
rowMaxLabelWidth?: number;
|
|
70
|
-
/** Text alignment for labels: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `TextAlign.Right` */
|
|
71
|
-
rowLabelTextAlign?: TextAlign | `${TextAlign}`;
|
|
72
|
-
arrows?: TimelineArrow[];
|
|
73
|
-
/** Control the animation by specify the initial position for new lines as [x, y]. Default: `undefined` */
|
|
74
|
-
animationLineEnterPosition?: [
|
|
75
|
-
number | undefined | null,
|
|
76
|
-
number | undefined | null
|
|
77
|
-
] | ((d: Datum & TimelineLineRenderState, i: number, data: (Datum & TimelineLineRenderState)[]) => [number | undefined, number | undefined]) | undefined;
|
|
78
|
-
/** Control the animation by specify the destination position for exiting lines as [x, y]. Default: `undefined` */
|
|
79
|
-
animationLineExitPosition?: [number | undefined | null, number | undefined | null] | ((d: Datum & TimelineLineRenderState, i: number, data: (Datum & TimelineLineRenderState)[]) => [number | undefined, number | undefined]) | undefined;
|
|
25
|
+
/** Alternating row colors. Default: `true` */
|
|
26
|
+
alternatingRowColors?: boolean;
|
|
80
27
|
/** Scrolling callback function: `(scrollTop: number) => void`. Default: `undefined` */
|
|
81
28
|
onScroll?: (scrollTop: number) => void;
|
|
29
|
+
/** Sets the minimum line length to 1 pixel for better visibility of small values. Default: `false` */
|
|
30
|
+
showEmptySegments?: boolean;
|
|
82
31
|
}
|
|
83
32
|
export declare const TimelineDefaultConfig: TimelineConfigInterface<unknown>;
|
|
@@ -1,20 +1,6 @@
|
|
|
1
1
|
import { XYComponentDefaultConfig } from '../../core/xy-component/config.js';
|
|
2
|
-
import { TextAlign } from '../../types/text.js';
|
|
3
|
-
import { Arrangement } from '../../types/position.js';
|
|
4
2
|
|
|
5
|
-
const TimelineDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { id: undefined,
|
|
6
|
-
// Items (Lines)
|
|
7
|
-
cursor: undefined, type: (d) => d.type, length: (d) => d.length, color: (d) => d.color, lineRow: undefined, lineDuration: undefined, lineWidth: 8, lineCap: false, lineCursor: undefined, showEmptySegments: false, lineStartIcon: undefined, lineStartIconColor: undefined, lineStartIconSize: undefined, lineStartIconArrangement: Arrangement.Inside, lineEndIcon: undefined, lineEndIconColor: undefined, lineEndIconSize: undefined, lineEndIconArrangement: Arrangement.Inside,
|
|
8
|
-
// Rows
|
|
9
|
-
rowHeight: 22, alternatingRowColors: true,
|
|
10
|
-
// Row Labels
|
|
11
|
-
showLabels: false, labelWidth: undefined, maxLabelWidth: 120, showRowLabels: undefined, rowLabelFormatter: undefined, rowIcon: undefined, rowLabelStyle: undefined, rowLabelWidth: undefined, rowMaxLabelWidth: undefined, rowLabelTextAlign: TextAlign.Right,
|
|
12
|
-
// Arrows
|
|
13
|
-
arrows: undefined,
|
|
14
|
-
// Animation
|
|
15
|
-
animationLineEnterPosition: undefined,
|
|
16
|
-
// Callbacks
|
|
17
|
-
onScroll: undefined });
|
|
3
|
+
const TimelineDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { id: undefined, color: (d) => d.color, lineWidth: 8, lineCap: false, rowHeight: 22, length: (d) => d.length, type: (d) => d.type, cursor: null, labelWidth: undefined, showLabels: false, maxLabelWidth: 120, alternatingRowColors: true, onScroll: undefined, showEmptySegments: false });
|
|
18
4
|
|
|
19
5
|
export { TimelineDefaultConfig };
|
|
20
6
|
//# sourceMappingURL=config.js.map
|