@unovis/ts 1.1.1-beta.9 → 1.1.2-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/components/axis/index.js +8 -4
- package/components/axis/index.js.map +1 -1
- package/components/leaflet-map/index.d.ts +5 -0
- package/components/leaflet-map/index.js +9 -0
- package/components/leaflet-map/index.js.map +1 -1
- package/components/leaflet-map/modules/utils.d.ts +1 -1
- package/components/leaflet-map/modules/utils.js +3 -3
- package/components/leaflet-map/modules/utils.js.map +1 -1
- package/components/leaflet-map/types.d.ts +1 -0
- package/components/leaflet-map/types.js.map +1 -1
- package/components.d.ts +0 -2
- package/components.js +0 -1
- package/components.js.map +1 -1
- package/containers/single-container/index.js +3 -0
- package/containers/single-container/index.js.map +1 -1
- package/core/container/index.d.ts +2 -1
- package/core/container/index.js +4 -0
- package/core/container/index.js.map +1 -1
- package/index.js +0 -2
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/types.d.ts +0 -1
- package/types.js +0 -1
- package/types.js.map +1 -1
- package/utils/data.js +3 -0
- package/utils/data.js.map +1 -1
- package/utils/style.d.ts +1 -1
- package/utils/style.js.map +1 -1
- package/components/nested-donut/config.d.ts +0 -59
- package/components/nested-donut/config.js +0 -19
- package/components/nested-donut/config.js.map +0 -1
- package/components/nested-donut/index.d.ts +0 -38
- package/components/nested-donut/index.js +0 -133
- package/components/nested-donut/index.js.map +0 -1
- package/components/nested-donut/modules/arc.d.ts +0 -17
- package/components/nested-donut/modules/arc.js +0 -50
- package/components/nested-donut/modules/arc.js.map +0 -1
- package/components/nested-donut/modules/label.d.ts +0 -7
- package/components/nested-donut/modules/label.js +0 -34
- package/components/nested-donut/modules/label.js.map +0 -1
- package/components/nested-donut/style.d.ts +0 -26
- package/components/nested-donut/style.js +0 -70
- package/components/nested-donut/style.js.map +0 -1
- package/components/nested-donut/types.d.ts +0 -24
- package/components/nested-donut/types.js +0 -11
- package/components/nested-donut/types.js.map +0 -1
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { ComponentConfig } from '../../core/component/config.js';
|
|
2
|
-
import { NestedDonutDirection } from './types.js';
|
|
3
|
-
|
|
4
|
-
// Core
|
|
5
|
-
class NestedDonutConfig extends ComponentConfig {
|
|
6
|
-
constructor() {
|
|
7
|
-
super(...arguments);
|
|
8
|
-
this.direction = NestedDonutDirection.INWARDS;
|
|
9
|
-
this.layerSettings = undefined;
|
|
10
|
-
this.layerPadding = 0;
|
|
11
|
-
this.angleRange = [0, 2 * Math.PI];
|
|
12
|
-
this.padAngle = 0;
|
|
13
|
-
this.cornerRadius = 0;
|
|
14
|
-
this.showBackground = true;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { NestedDonutConfig };
|
|
19
|
-
//# sourceMappingURL=config.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/nested-donut/config.ts"],"sourcesContent":["// Core\nimport { ComponentConfigInterface, ComponentConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, GenericAccessor, StringAccessor } from 'types/accessor'\nimport { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment } from './types'\n\n\nexport interface NestedDonutConfigInterface<Datum> extends ComponentConfigInterface {\n /** Diagram angle range. Default: `[0, 2 * Math.PI]` */\n angleRange?: [number, number];\n /** Direction of hierarchy flow from root to leaf.\n * `NestedDonutDirection.INWARDS` starts from the outer most radius and works towards center\n * `NestedDonutDirection.OUTWARDS` starts from the inner most radius the consecutive layers outward.\n * Default: `NestedDonutDirection.INWARDS`\n */\n direction?: NestedDonutDirection | string;\n\n /** Central label text. Default: `undefined` */\n centralLabel?: string;\n /** Central sub-label accessor function or text. Default: `undefined` */\n centralSubLabel?: string;\n /** Enables wrapping for the sub-label. Default: `true` */\n centralSubLabelWrap?: boolean;\n /**\n * Show donut background. The color is configurable via\n * the `--vis-nested-donut-background-color` and `--vis-dark-nested-donut-background-color` CSS variables.\n * Default: `true`\n */\n showBackground?: boolean;\n\n // Layers\n /** Array of accessor functions to defined the nested groups */\n layers: StringAccessor<Datum>[];\n /* Layer settings */\n layerConfig?: GenericAccessor<NestedDonutLayerSettings, string>;\n /* Space between layers */\n layerPadding?: number;\n\n // Segments\n /** Color accessor function. Default: `undefined` */\n color?: ColorAccessor<NestedDonutSegment<Datum>>;\n /** Corner Radius. Default: `0` */\n cornerRadius?: number;\n /** Label accessor function. */\n label?: StringAccessor<NestedDonutSegment<Datum>>;\n /**\n * When true, the component will display empty segments (the ones that have `0` values) as tiny slices.\n * Default: `false`\n * */\n showEmptySegments?: boolean;\n /** Angular size for empty segments in radians. Default: `0.5 * Math.PI / 180` */\n emptySegmentAngle?: number;\n}\n\nexport class NestedDonutConfig<Datum> extends ComponentConfig implements NestedDonutConfigInterface<Datum> {\n centralLabel?: string\n centralSubLabel?: string\n centralSubLabelWrap?: boolean\n showEmptySegments?: boolean\n emptySegmentAngle?: number\n\n color?: ColorAccessor<NestedDonutSegment<Datum>>\n label?: StringAccessor<NestedDonutSegment<Datum>>\n direction = NestedDonutDirection.INWARDS\n layers: StringAccessor<Datum>[]\n layerSettings = undefined\n layerPadding = 0\n angleRange = [0, 2 * Math.PI] as [number, number]\n padAngle = 0\n cornerRadius = 0\n showBackground = true\n}\n\n\n"],"names":[],"mappings":";;;AAAA;AAuDM,MAAO,iBAAyB,SAAQ,eAAe,CAAA;AAA7D,IAAA,WAAA,GAAA;;AASE,QAAA,IAAA,CAAA,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAA;QAExC,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAU,CAAA,UAAA,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,CAAqB,CAAA;QACjD,IAAQ,CAAA,QAAA,GAAG,CAAC,CAAA;QACZ,IAAY,CAAA,YAAA,GAAG,CAAC,CAAA;QAChB,IAAc,CAAA,cAAA,GAAG,IAAI,CAAA;KACtB;AAAA;;;;"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { Selection } from 'd3-selection';
|
|
2
|
-
import { ScaleLinear } from 'd3-scale';
|
|
3
|
-
import { ComponentCore } from "../../core/component";
|
|
4
|
-
import { SeriesDataModel } from "../../data-models/series";
|
|
5
|
-
import { NestedDonutSegment } from './types';
|
|
6
|
-
import { NestedDonutConfig, NestedDonutConfigInterface } from './config';
|
|
7
|
-
import * as s from './style';
|
|
8
|
-
export declare class NestedDonut<Datum> extends ComponentCore<Datum[], NestedDonutConfig<Datum>, NestedDonutConfigInterface<Datum>> {
|
|
9
|
-
static selectors: typeof s;
|
|
10
|
-
static cssVariables: {
|
|
11
|
-
nestedDonutBackgroundColor: "--vis-nested-donut-background-color";
|
|
12
|
-
nestedDonutFontFamily: "--vis-nested-donut-font-family";
|
|
13
|
-
nestedDonutCentralLabelFontSize: "--vis-nested-donut-central-label-font-size";
|
|
14
|
-
nestedDonutCentralLabelFontWeight: "--vis-nested-donut-central-label-font-weight";
|
|
15
|
-
nestedDonutCentralLabelTextColor: "--vis-nested-donut-central-label-text-color";
|
|
16
|
-
nestedDonutCentralSublabelFontSize: "--vis-nested-donut-central-sublabel-font-size";
|
|
17
|
-
nestedDonutCentralSublabelFontWeight: "--vis-nested-donut-central-sublabel-font-weight";
|
|
18
|
-
nestedDonutCentralSublabelTextColor: "--vis-nested-donut-central-sublabel-text-color";
|
|
19
|
-
nestedDonutSegmentStrokeWidth: "--vis-nested-donut-segment-stroke-width";
|
|
20
|
-
nestedDonutSegmentStrokeColor: "--vis-nested-donut-segment-stroke-color";
|
|
21
|
-
darkNestedDonutBackgroundColor: "--vis-dark-nested-donut-background-color";
|
|
22
|
-
darkNestedDonutCentralLabelTextColor: "--vis-dark-nested-donut-central-label-text-color";
|
|
23
|
-
darkNestedDonutCentralSublabelTextColor: "--vis-dark-nested-donut-central-sublabel-text-color";
|
|
24
|
-
};
|
|
25
|
-
config: NestedDonutConfig<Datum>;
|
|
26
|
-
datamodel: SeriesDataModel<Datum>;
|
|
27
|
-
arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>;
|
|
28
|
-
arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
|
|
29
|
-
centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>;
|
|
30
|
-
centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>;
|
|
31
|
-
arcGen: import("d3-shape").Arc<any, Partial<NestedDonutSegment<Datum>>>;
|
|
32
|
-
radiusScale: ScaleLinear<number, number>;
|
|
33
|
-
colorScale: ScaleLinear<string, string>;
|
|
34
|
-
events: {};
|
|
35
|
-
constructor(config?: NestedDonutConfigInterface<Datum>);
|
|
36
|
-
private getHierarchyData;
|
|
37
|
-
_render(customDuration?: number): void;
|
|
38
|
-
}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import { arc } from 'd3-shape';
|
|
2
|
-
import { hierarchy, partition } from 'd3-hierarchy';
|
|
3
|
-
import { scaleLinear } from 'd3-scale';
|
|
4
|
-
import { group, sum, min, max } from 'd3-array';
|
|
5
|
-
import { ComponentCore } from '../../core/component/index.js';
|
|
6
|
-
import { SeriesDataModel } from '../../data-models/series.js';
|
|
7
|
-
import { VerticalAlign } from '../../types/text.js';
|
|
8
|
-
import { getColor, getHexValue } from '../../utils/color.js';
|
|
9
|
-
import { getString, isNumber, getValue } from '../../utils/data.js';
|
|
10
|
-
import { smartTransition } from '../../utils/d3.js';
|
|
11
|
-
import { wrapSVGText } from '../../utils/text.js';
|
|
12
|
-
import { defaultLayerSettings, NestedDonutDirection } from './types.js';
|
|
13
|
-
import { NestedDonutConfig } from './config.js';
|
|
14
|
-
import { createArc, updateArc, removeArc } from './modules/arc.js';
|
|
15
|
-
import { createLabel, updateLabel, removeLabel } from './modules/label.js';
|
|
16
|
-
import * as style from './style.js';
|
|
17
|
-
import { centralLabel, centralSubLabel, segment, segmentExit, segmentLabel, background, variables } from './style.js';
|
|
18
|
-
|
|
19
|
-
class NestedDonut extends ComponentCore {
|
|
20
|
-
constructor(config) {
|
|
21
|
-
super();
|
|
22
|
-
this.config = new NestedDonutConfig();
|
|
23
|
-
this.datamodel = new SeriesDataModel();
|
|
24
|
-
this.arcGen = arc();
|
|
25
|
-
this.radiusScale = scaleLinear();
|
|
26
|
-
this.colorScale = scaleLinear();
|
|
27
|
-
this.events = {};
|
|
28
|
-
if (config)
|
|
29
|
-
this.config.init(config);
|
|
30
|
-
this.arcBackground = this.g.append('path');
|
|
31
|
-
this.arcGroup = this.g.append('g');
|
|
32
|
-
this.centralLabel = this.g.append('text')
|
|
33
|
-
.attr('class', centralLabel);
|
|
34
|
-
this.centralSubLabel = this.g.append('text')
|
|
35
|
-
.attr('class', centralSubLabel);
|
|
36
|
-
}
|
|
37
|
-
getHierarchyData() {
|
|
38
|
-
var _a;
|
|
39
|
-
const { config, datamodel } = this;
|
|
40
|
-
const layerAccessors = (_a = config.layers) === null || _a === void 0 ? void 0 : _a.map(layerAccessor => (d, i) => getString(d, layerAccessor, i));
|
|
41
|
-
const nestedData = group(datamodel.data, ...layerAccessors);
|
|
42
|
-
const rootNode = hierarchy(nestedData).count();
|
|
43
|
-
const partitionData = partition().size([config.angleRange[1], 1])(rootNode);
|
|
44
|
-
partitionData.eachBefore((node, index) => {
|
|
45
|
-
var _a, _b, _c, _d;
|
|
46
|
-
const scale = this.colorScale.domain([-1, (_a = node.children) === null || _a === void 0 ? void 0 : _a.length]);
|
|
47
|
-
node._id = this.uid + index;
|
|
48
|
-
node._layer = node.depth - 1;
|
|
49
|
-
node.data = { key: node.data[0], root: (_c = (_b = node.parent) === null || _b === void 0 ? void 0 : _b.data.root) !== null && _c !== void 0 ? _c : node.data[0] };
|
|
50
|
-
(_d = node.children) === null || _d === void 0 ? void 0 : _d.forEach((child, i) => {
|
|
51
|
-
var _a;
|
|
52
|
-
child._index = i;
|
|
53
|
-
child._state = {
|
|
54
|
-
fill: (_a = getColor(child, config.color, i, child.depth !== 1)) !== null && _a !== void 0 ? _a : scale.range(['#fff', getHexValue(node._state.fill, this.element)])(i),
|
|
55
|
-
};
|
|
56
|
-
});
|
|
57
|
-
});
|
|
58
|
-
const segments = partitionData.descendants().filter(d => d.parent && d.children && d.data.key);
|
|
59
|
-
return segments;
|
|
60
|
-
}
|
|
61
|
-
_render(customDuration) {
|
|
62
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
63
|
-
const { config } = this;
|
|
64
|
-
const duration = isNumber(customDuration) ? customDuration : config.duration;
|
|
65
|
-
const layers = (_a = config.layers) === null || _a === void 0 ? void 0 : _a.map((_, i) => { var _a; return (_a = getValue(i, config.layerSettings)) !== null && _a !== void 0 ? _a : defaultLayerSettings; });
|
|
66
|
-
const data = this.getHierarchyData();
|
|
67
|
-
const outerRadius = Math.min(this._width, this._height) / 2;
|
|
68
|
-
const innerRadius = Math.max(0, outerRadius - sum(layers, d => d.width + config.layerPadding));
|
|
69
|
-
const yMin = min(data, d => d.y0);
|
|
70
|
-
const yMax = max(data, d => d.y1);
|
|
71
|
-
this.radiusScale
|
|
72
|
-
.domain(config.direction === NestedDonutDirection.OUTWARDS ? [yMin, yMax] : [yMax, yMin])
|
|
73
|
-
.range([innerRadius, outerRadius]);
|
|
74
|
-
this.arcGen
|
|
75
|
-
.startAngle(d => d.x0)
|
|
76
|
-
.endAngle(d => d.x1)
|
|
77
|
-
.innerRadius(d => this.radiusScale(d.y0))
|
|
78
|
-
.outerRadius(d => this.radiusScale(d.y1))
|
|
79
|
-
.padAngle(config.padAngle)
|
|
80
|
-
.cornerRadius(config.cornerRadius);
|
|
81
|
-
this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
|
|
82
|
-
// Arcs
|
|
83
|
-
const arcs = this.arcGroup
|
|
84
|
-
.selectAll(`.${segment}`)
|
|
85
|
-
.data(data, d => d._id);
|
|
86
|
-
const arcsEnter = arcs.enter().append('path')
|
|
87
|
-
.attr('class', segment)
|
|
88
|
-
.call(createArc, config);
|
|
89
|
-
arcs.merge(arcsEnter)
|
|
90
|
-
.call(updateArc, config, this.arcGen, duration);
|
|
91
|
-
arcs.exit()
|
|
92
|
-
.attr('class', segmentExit)
|
|
93
|
-
.call(removeArc, duration);
|
|
94
|
-
// Segment labels
|
|
95
|
-
const arcLabels = this.arcGroup
|
|
96
|
-
.selectAll(`.${segmentLabel}`)
|
|
97
|
-
.data(data, d => d._id);
|
|
98
|
-
const arcLabelsEnter = arcLabels.enter().append('text')
|
|
99
|
-
.attr('class', segmentLabel)
|
|
100
|
-
.call(createLabel, config);
|
|
101
|
-
arcLabels.merge(arcLabelsEnter)
|
|
102
|
-
.call(updateLabel, config, this.arcGen, duration);
|
|
103
|
-
arcLabels.exit()
|
|
104
|
-
.call(removeLabel, duration);
|
|
105
|
-
// Chart labels
|
|
106
|
-
this.centralLabel
|
|
107
|
-
.attr('transform', `translate(${this._width / 2},${this._height / 2})`)
|
|
108
|
-
.attr('dy', config.centralSubLabel ? '-0.55em' : null)
|
|
109
|
-
.text((_b = config.centralLabel) !== null && _b !== void 0 ? _b : null);
|
|
110
|
-
this.centralSubLabel
|
|
111
|
-
.attr('transform', `translate(${this._width / 2},${this._height / 2})`)
|
|
112
|
-
.attr('dy', config.centralLabel ? '0.55em' : null)
|
|
113
|
-
.text((_c = config.centralSubLabel) !== null && _c !== void 0 ? _c : null);
|
|
114
|
-
if (config.centralSubLabelWrap)
|
|
115
|
-
wrapSVGText(this.centralSubLabel, innerRadius * 1.9, VerticalAlign.Top);
|
|
116
|
-
// Background
|
|
117
|
-
this.arcBackground.attr('class', background)
|
|
118
|
-
.attr('visibility', config.showBackground ? null : 'hidden')
|
|
119
|
-
.attr('transform', `translate(${this._width / 2},${this._height / 2})`);
|
|
120
|
-
smartTransition(this.arcBackground, duration)
|
|
121
|
-
.attr('d', arc()({
|
|
122
|
-
startAngle: (_g = (_e = (_d = config.angleRange) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : (_f = config.angleRange) === null || _f === void 0 ? void 0 : _f[0]) !== null && _g !== void 0 ? _g : 0,
|
|
123
|
-
endAngle: (_l = (_j = (_h = config.angleRange) === null || _h === void 0 ? void 0 : _h[1]) !== null && _j !== void 0 ? _j : (_k = config.angleRange) === null || _k === void 0 ? void 0 : _k[1]) !== null && _l !== void 0 ? _l : 2 * Math.PI,
|
|
124
|
-
innerRadius,
|
|
125
|
-
outerRadius,
|
|
126
|
-
}));
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
NestedDonut.selectors = style;
|
|
130
|
-
NestedDonut.cssVariables = variables;
|
|
131
|
-
|
|
132
|
-
export { NestedDonut };
|
|
133
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/nested-donut/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { arc } from 'd3-shape'\nimport { hierarchy, partition } from 'd3-hierarchy'\nimport { scaleLinear, ScaleLinear } from 'd3-scale'\nimport { group, max, min, sum } from 'd3-array'\n\n// Core\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\n\n// Types\nimport { VerticalAlign } from 'types/text'\n\n// Utils\nimport { getColor, getHexValue } from 'utils/color'\nimport { getString, getValue, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { wrapSVGText } from 'utils/text'\n\n// Local Types\nimport { NestedDonutDirection, NestedDonutLayerSettings, NestedDonutSegment, defaultLayerSettings } from './types'\n\n// Config\nimport { NestedDonutConfig, NestedDonutConfigInterface } from './config'\n\n// Modules\nimport { createArc, updateArc, removeArc } from './modules/arc'\nimport { createLabel, updateLabel, removeLabel } from './modules/label'\n\n// Styles\nimport * as s from './style'\n\nexport class NestedDonut<Datum> extends ComponentCore<\nDatum[],\nNestedDonutConfig<Datum>,\nNestedDonutConfigInterface<Datum>\n> {\n static selectors = s\n static cssVariables = s.variables\n config: NestedDonutConfig<Datum> = new NestedDonutConfig()\n datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n\n arcBackground: Selection<SVGPathElement, unknown, SVGGElement, unknown>\n arcGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>\n centralLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n centralSubLabel: Selection<SVGTextElement, unknown, SVGGElement, unknown>\n\n arcGen = arc<Partial<NestedDonutSegment<Datum>>>()\n radiusScale: ScaleLinear<number, number> = scaleLinear()\n colorScale: ScaleLinear<string, string> = scaleLinear()\n\n events = { }\n\n constructor (config?: NestedDonutConfigInterface<Datum>) {\n super()\n if (config) this.config.init(config)\n this.arcBackground = this.g.append('path')\n this.arcGroup = this.g.append('g')\n this.centralLabel = this.g.append('text')\n .attr('class', s.centralLabel)\n this.centralSubLabel = this.g.append('text')\n .attr('class', s.centralSubLabel)\n }\n\n private getHierarchyData (): NestedDonutSegment<Datum>[] {\n const { config, datamodel } = this\n\n const layerAccessors = config.layers?.map(layerAccessor => (d: Datum, i: number) => getString(d, layerAccessor, i))\n const nestedData = group(datamodel.data, ...layerAccessors as [(d: Datum) => string])\n const rootNode = hierarchy(nestedData).count()\n const partitionData = partition().size([config.angleRange[1], 1])(rootNode) as NestedDonutSegment<Datum>\n\n partitionData.eachBefore((node, index) => {\n const scale = this.colorScale.domain([-1, node.children?.length])\n node._id = this.uid + index\n node._layer = node.depth - 1\n\n node.data = { key: node.data[0], root: node.parent?.data.root ?? node.data[0] }\n node.children?.forEach((child, i) => {\n child._index = i\n child._state = {\n fill:\n getColor(child, config.color, i, child.depth !== 1) ??\n scale.range(['#fff', getHexValue(node._state.fill, this.element)])(i),\n }\n })\n })\n const segments = partitionData.descendants().filter(d => d.parent && d.children && d.data.key)\n return segments\n }\n\n _render (customDuration?: number): void {\n const { config } = this\n const duration = isNumber(customDuration) ? customDuration : config.duration\n\n const layers: NestedDonutLayerSettings[] = config.layers?.map((_, i) => getValue(i, config.layerSettings) ?? defaultLayerSettings)\n const data = this.getHierarchyData()\n\n const outerRadius = Math.min(this._width, this._height) / 2\n const innerRadius = Math.max(0, outerRadius - sum(layers, d => d.width + config.layerPadding))\n\n const yMin = min(data, d => d.y0)\n const yMax = max(data, d => d.y1)\n\n this.radiusScale\n .domain(config.direction === NestedDonutDirection.OUTWARDS ? [yMin, yMax] : [yMax, yMin])\n .range([innerRadius, outerRadius])\n\n this.arcGen\n .startAngle(d => d.x0)\n .endAngle(d => d.x1)\n .innerRadius(d => this.radiusScale(d.y0))\n .outerRadius(d => this.radiusScale(d.y1))\n .padAngle(config.padAngle)\n .cornerRadius(config.cornerRadius)\n\n this.arcGroup.attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n // Arcs\n const arcs = this.arcGroup\n .selectAll<SVGPathElement, NestedDonutSegment<Datum>>(`.${s.segment}`)\n .data(data, d => d._id)\n\n const arcsEnter = arcs.enter().append('path')\n .attr('class', s.segment)\n .call(createArc, config)\n\n arcs.merge(arcsEnter)\n .call(updateArc, config, this.arcGen, duration)\n\n arcs.exit<NestedDonutSegment<Datum>>()\n .attr('class', s.segmentExit)\n .call(removeArc, duration)\n\n // Segment labels\n const arcLabels = this.arcGroup\n .selectAll<SVGTextElement, NestedDonutSegment<Datum>>(`.${s.segmentLabel}`)\n .data(data, d => d._id)\n\n const arcLabelsEnter = arcLabels.enter().append('text')\n .attr('class', s.segmentLabel)\n .call(createLabel, config)\n\n arcLabels.merge(arcLabelsEnter)\n .call(updateLabel, config, this.arcGen, duration)\n\n arcLabels.exit<NestedDonutSegment<Datum>>()\n .call(removeLabel, duration)\n\n // Chart labels\n this.centralLabel\n .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n .attr('dy', config.centralSubLabel ? '-0.55em' : null)\n .text(config.centralLabel ?? null)\n\n this.centralSubLabel\n .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n .attr('dy', config.centralLabel ? '0.55em' : null)\n .text(config.centralSubLabel ?? null)\n\n if (config.centralSubLabelWrap) wrapSVGText(this.centralSubLabel, innerRadius * 1.9, VerticalAlign.Top)\n\n // Background\n this.arcBackground.attr('class', s.background)\n .attr('visibility', config.showBackground ? null : 'hidden')\n .attr('transform', `translate(${this._width / 2},${this._height / 2})`)\n\n smartTransition(this.arcBackground, duration)\n .attr('d', arc()({\n startAngle: config.angleRange?.[0] ?? config.angleRange?.[0] ?? 0,\n endAngle: config.angleRange?.[1] ?? config.angleRange?.[1] ?? 2 * Math.PI,\n innerRadius,\n outerRadius,\n }))\n }\n}\n"],"names":["s.centralLabel","s.centralSubLabel","s.segment","s.segmentExit","s.segmentLabel","s.background","s","s.variables"],"mappings":"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"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Selection } from 'd3-selection';
|
|
2
|
-
import { Arc } from 'd3-shape';
|
|
3
|
-
import { NestedDonutSegment } from '../types';
|
|
4
|
-
import { NestedDonutConfig } from '../config';
|
|
5
|
-
declare type AnimState = {
|
|
6
|
-
x0: number;
|
|
7
|
-
x1: number;
|
|
8
|
-
y0: number;
|
|
9
|
-
y1: number;
|
|
10
|
-
};
|
|
11
|
-
export interface ArcNode extends SVGElement {
|
|
12
|
-
_animState?: AnimState;
|
|
13
|
-
}
|
|
14
|
-
export declare function createArc<Datum>(selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, config: NestedDonutConfig<Datum>): void;
|
|
15
|
-
export declare function updateArc<Datum>(selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, config: NestedDonutConfig<Datum>, arcGen: Arc<any, AnimState>, duration: number): void;
|
|
16
|
-
export declare function removeArc<Datum>(selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, duration: number): void;
|
|
17
|
-
export {};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { interpolate } from 'd3-interpolate';
|
|
2
|
-
import { getColor } from '../../../utils/color.js';
|
|
3
|
-
import { smartTransition } from '../../../utils/d3.js';
|
|
4
|
-
|
|
5
|
-
function createArc(selection, config) {
|
|
6
|
-
selection
|
|
7
|
-
.style('fill', d => { var _a; return (_a = getColor(d, config.color)) !== null && _a !== void 0 ? _a : d._state.fill; })
|
|
8
|
-
.style('opacity', 0)
|
|
9
|
-
.each((d, i, els) => {
|
|
10
|
-
const arcNode = els[i];
|
|
11
|
-
const angleCenter = (d.x0 + d.x1) / 2;
|
|
12
|
-
const angleHalfWidth = (d.x1 - d.x0) / 2;
|
|
13
|
-
arcNode._animState = {
|
|
14
|
-
x0: angleCenter - angleHalfWidth,
|
|
15
|
-
x1: angleCenter + angleHalfWidth,
|
|
16
|
-
y0: d.y0,
|
|
17
|
-
y1: d.y1,
|
|
18
|
-
};
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
function updateArc(selection, config, arcGen, duration) {
|
|
22
|
-
selection
|
|
23
|
-
.style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
|
|
24
|
-
.style('fill', d => { var _a; return (_a = getColor(d, config.color)) !== null && _a !== void 0 ? _a : d._state.fill; });
|
|
25
|
-
if (duration) {
|
|
26
|
-
const transition = smartTransition(selection, duration)
|
|
27
|
-
.style('opacity', 1);
|
|
28
|
-
transition.attrTween('d', (d, i, els) => {
|
|
29
|
-
const arcNode = els[i];
|
|
30
|
-
const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 };
|
|
31
|
-
const datum = interpolate(arcNode._animState, nextAnimState);
|
|
32
|
-
return (t) => {
|
|
33
|
-
arcNode._animState = datum(t);
|
|
34
|
-
return arcGen(arcNode._animState);
|
|
35
|
-
};
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
else {
|
|
39
|
-
selection.attr('d', arcGen)
|
|
40
|
-
.style('opacity', 1);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
function removeArc(selection, duration) {
|
|
44
|
-
smartTransition(selection, duration)
|
|
45
|
-
.style('opacity', 0)
|
|
46
|
-
.remove();
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export { createArc, removeArc, updateArc };
|
|
50
|
-
//# sourceMappingURL=arc.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"arc.js","sources":["../../../../src/components/nested-donut/modules/arc.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { interpolate } from 'd3-interpolate'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\n\n// Local Types\nimport { NestedDonutSegment } from '../types'\n\n// Config\nimport { NestedDonutConfig } from '../config'\n\ntype AnimState = { x0: number; x1: number; y0: number; y1: number }\nexport interface ArcNode extends SVGElement {\n _animState?: AnimState;\n}\n\nexport function createArc<Datum> (\n selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n config: NestedDonutConfig<Datum>\n): void {\n selection\n .style('fill', d => getColor(d, config.color) ?? d._state.fill)\n .style('opacity', 0)\n .each((d, i, els) => {\n const arcNode: ArcNode = els[i]\n const angleCenter = (d.x0 + d.x1) / 2\n const angleHalfWidth = (d.x1 - d.x0) / 2\n arcNode._animState = {\n x0: angleCenter - angleHalfWidth,\n x1: angleCenter + angleHalfWidth,\n y0: d.y0,\n y1: d.y1,\n }\n })\n}\n\nexport function updateArc<Datum> (\n selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n config: NestedDonutConfig<Datum>,\n arcGen: Arc<any, AnimState>,\n duration: number\n): void {\n selection\n .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables\n .style('fill', d => getColor(d, config.color) ?? d._state.fill)\n\n if (duration) {\n const transition = smartTransition(selection, duration)\n .style('opacity', 1) as Transition<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, ArcNode>\n\n transition.attrTween('d', (d, i, els) => {\n const arcNode: ArcNode = els[i]\n const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }\n const datum = interpolate(arcNode._animState, nextAnimState)\n\n return (t: number): string => {\n arcNode._animState = datum(t)\n return arcGen(arcNode._animState)\n }\n })\n } else {\n selection.attr('d', arcGen)\n .style('opacity', 1)\n }\n}\n\nexport function removeArc<Datum> (\n selection: Selection<SVGPathElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n duration: number\n): void {\n smartTransition(selection, duration)\n .style('opacity', 0)\n .remove()\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Selection } from 'd3-selection';
|
|
2
|
-
import { Arc } from 'd3-shape';
|
|
3
|
-
import { NestedDonutConfig } from '../config';
|
|
4
|
-
import { NestedDonutSegment } from '../types';
|
|
5
|
-
export declare function createLabel<Datum>(selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, config: NestedDonutConfig<Datum>): void;
|
|
6
|
-
export declare function updateLabel<Datum>(selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, config: NestedDonutConfig<Datum>, arcGen: Arc<unknown, NestedDonutSegment<Datum>>, duration: number): void;
|
|
7
|
-
export declare function removeLabel<Datum>(selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>, duration: number): void;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { color } from 'd3-color';
|
|
2
|
-
import { getColor, hexToBrightness } from '../../../utils/color.js';
|
|
3
|
-
import { smartTransition } from '../../../utils/d3.js';
|
|
4
|
-
import { getString } from '../../../utils/data.js';
|
|
5
|
-
import { labelColors } from '../style.js';
|
|
6
|
-
|
|
7
|
-
function getLabelFillColor(d, config) {
|
|
8
|
-
const c = getColor(d, config.color, d._index, true);
|
|
9
|
-
const colorParsed = color(c);
|
|
10
|
-
const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0;
|
|
11
|
-
return brightness > 0.65 ? labelColors.dark : labelColors.light;
|
|
12
|
-
}
|
|
13
|
-
function createLabel(selection, config) {
|
|
14
|
-
selection
|
|
15
|
-
.text(d => { var _a; return (_a = getString(d, config.label)) !== null && _a !== void 0 ? _a : d.data.key; })
|
|
16
|
-
.style('opacity', 0);
|
|
17
|
-
}
|
|
18
|
-
function updateLabel(selection, config, arcGen, duration) {
|
|
19
|
-
smartTransition(selection, duration)
|
|
20
|
-
.style('opacity', 1);
|
|
21
|
-
selection
|
|
22
|
-
.text(d => { var _a; return (_a = getString(d, config.label)) !== null && _a !== void 0 ? _a : d.data.key; })
|
|
23
|
-
.attr('x', d => arcGen.centroid(d)[0])
|
|
24
|
-
.attr('y', d => arcGen.centroid(d)[1])
|
|
25
|
-
.style('fill', d => getLabelFillColor(d, config));
|
|
26
|
-
}
|
|
27
|
-
function removeLabel(selection, duration) {
|
|
28
|
-
smartTransition(selection, duration)
|
|
29
|
-
.style('opacity', 0)
|
|
30
|
-
.remove();
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export { createLabel, removeLabel, updateLabel };
|
|
34
|
-
//# sourceMappingURL=label.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"label.js","sources":["../../../../src/components/nested-donut/modules/label.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { color } from 'd3-color'\nimport { Arc } from 'd3-shape'\n\n// Utils\nimport { getColor, hexToBrightness } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getString } from 'utils/data'\n\n// Config\nimport { NestedDonutConfig } from '../config'\n\n// Local Types\nimport { NestedDonutSegment } from '../types'\n\n// Styles\nimport { labelColors } from '../style'\n\nfunction getLabelFillColor<Datum> (\n d: NestedDonutSegment<Datum>,\n config: NestedDonutConfig<Datum>\n): string {\n const c = getColor(d, config.color, d._index, true)\n const colorParsed = color(c)\n const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0\n return brightness > 0.65 ? labelColors.dark : labelColors.light\n}\n\nexport function createLabel<Datum> (\n selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n config: NestedDonutConfig<Datum>\n): void {\n selection\n .text(d => getString(d, config.label) ?? d.data.key)\n .style('opacity', 0)\n}\n\nexport function updateLabel<Datum> (\n selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n config: NestedDonutConfig<Datum>,\n arcGen: Arc<unknown, NestedDonutSegment<Datum>>,\n duration: number\n): void {\n smartTransition(selection, duration)\n .style('opacity', 1)\n\n selection\n .text(d => getString(d, config.label) ?? d.data.key)\n .attr('x', d => arcGen.centroid(d)[0])\n .attr('y', d => arcGen.centroid(d)[1])\n .style('fill', d => getLabelFillColor(d, config))\n}\n\nexport function removeLabel<Datum> (\n selection: Selection<SVGTextElement, NestedDonutSegment<Datum>, SVGGElement, unknown>,\n duration: number\n): void {\n smartTransition(selection, duration)\n .style('opacity', 0)\n .remove()\n}\n\n\n"],"names":[],"mappings":";;;;;;AAkBA,SAAS,iBAAiB,CACxB,CAA4B,EAC5B,MAAgC,EAAA;AAEhC,IAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;AACnD,IAAA,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;AAC5B,IAAA,MAAM,UAAU,GAAG,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAA;AACvE,IAAA,OAAO,UAAU,GAAG,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,CAAA;AACjE,CAAC;AAEe,SAAA,WAAW,CACzB,SAAqF,EACrF,MAAgC,EAAA;IAEhC,SAAS;SACN,IAAI,CAAC,CAAC,cAAI,OAAA,CAAA,EAAA,GAAA,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA,EAAA,CAAC;AACnD,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;AACxB,CAAC;AAEK,SAAU,WAAW,CACzB,SAAqF,EACrF,MAAgC,EAChC,MAA+C,EAC/C,QAAgB,EAAA;AAEhB,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;IAEtB,SAAS;SACN,IAAI,CAAC,CAAC,cAAI,OAAA,CAAA,EAAA,GAAA,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAA,EAAA,CAAC;AACnD,SAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrC,SAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrC,SAAA,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAA;AACrD,CAAC;AAEe,SAAA,WAAW,CACzB,SAAqF,EACrF,QAAgB,EAAA;AAEhB,IAAA,eAAe,CAAC,SAAS,EAAE,QAAQ,CAAC;AACjC,SAAA,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;AACnB,SAAA,MAAM,EAAE,CAAA;AACb;;;;"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export declare const labelColors: {
|
|
2
|
-
dark: string;
|
|
3
|
-
light: string;
|
|
4
|
-
};
|
|
5
|
-
export declare const root: string;
|
|
6
|
-
export declare const variables: {
|
|
7
|
-
nestedDonutBackgroundColor: "--vis-nested-donut-background-color";
|
|
8
|
-
nestedDonutFontFamily: "--vis-nested-donut-font-family";
|
|
9
|
-
nestedDonutCentralLabelFontSize: "--vis-nested-donut-central-label-font-size";
|
|
10
|
-
nestedDonutCentralLabelFontWeight: "--vis-nested-donut-central-label-font-weight";
|
|
11
|
-
nestedDonutCentralLabelTextColor: "--vis-nested-donut-central-label-text-color";
|
|
12
|
-
nestedDonutCentralSublabelFontSize: "--vis-nested-donut-central-sublabel-font-size";
|
|
13
|
-
nestedDonutCentralSublabelFontWeight: "--vis-nested-donut-central-sublabel-font-weight";
|
|
14
|
-
nestedDonutCentralSublabelTextColor: "--vis-nested-donut-central-sublabel-text-color";
|
|
15
|
-
nestedDonutSegmentStrokeWidth: "--vis-nested-donut-segment-stroke-width";
|
|
16
|
-
nestedDonutSegmentStrokeColor: "--vis-nested-donut-segment-stroke-color";
|
|
17
|
-
darkNestedDonutBackgroundColor: "--vis-dark-nested-donut-background-color";
|
|
18
|
-
darkNestedDonutCentralLabelTextColor: "--vis-dark-nested-donut-central-label-text-color";
|
|
19
|
-
darkNestedDonutCentralSublabelTextColor: "--vis-dark-nested-donut-central-sublabel-text-color";
|
|
20
|
-
};
|
|
21
|
-
export declare const background: string;
|
|
22
|
-
export declare const segment: string;
|
|
23
|
-
export declare const segmentLabel: string;
|
|
24
|
-
export declare const segmentExit: string;
|
|
25
|
-
export declare const centralLabel: string;
|
|
26
|
-
export declare const centralSubLabel: string;
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { css } from '@emotion/css';
|
|
2
|
-
import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
|
|
3
|
-
|
|
4
|
-
const labelColors = {
|
|
5
|
-
dark: '#5b5f6d',
|
|
6
|
-
light: '#fff',
|
|
7
|
-
};
|
|
8
|
-
const cssVarDefaults = {
|
|
9
|
-
'--vis-nested-donut-background-color': '#E7E9F3',
|
|
10
|
-
// Undefined by default to allow proper fallback to var(--vis-font-family)
|
|
11
|
-
'--vis-nested-donut-font-family': undefined,
|
|
12
|
-
// Central label
|
|
13
|
-
'--vis-nested-donut-central-label-font-size': '16px',
|
|
14
|
-
'--vis-nested-donut-central-label-font-weight': 600,
|
|
15
|
-
'--vis-nested-donut-central-label-text-color': labelColors.dark,
|
|
16
|
-
// Central sub-label
|
|
17
|
-
'--vis-nested-donut-central-sublabel-font-size': '12px;',
|
|
18
|
-
'--vis-nested-donut-central-sublabel-font-weight': 500,
|
|
19
|
-
'--vis-nested-donut-central-sublabel-text-color': labelColors.dark,
|
|
20
|
-
// Segments
|
|
21
|
-
'--vis-nested-donut-segment-stroke-width': '1px',
|
|
22
|
-
'--vis-nested-donut-segment-stroke-color': '',
|
|
23
|
-
/* Dark theme */
|
|
24
|
-
'--vis-dark-nested-donut-background-color': '#18160C',
|
|
25
|
-
'--vis-dark-nested-donut-central-label-text-color': labelColors.light,
|
|
26
|
-
'--vis-dark-nested-donut-central-sublabel-text-color': labelColors.light,
|
|
27
|
-
};
|
|
28
|
-
const root = css `
|
|
29
|
-
label: nested-donut-component;
|
|
30
|
-
`;
|
|
31
|
-
const variables = getCssVarNames(cssVarDefaults);
|
|
32
|
-
injectGlobalCssVariables(cssVarDefaults, root);
|
|
33
|
-
const background = css `
|
|
34
|
-
label: background;
|
|
35
|
-
fill: var(--vis-donut-background-color);
|
|
36
|
-
`;
|
|
37
|
-
const segment = css `
|
|
38
|
-
label: segment;
|
|
39
|
-
stroke-width: var(--vis-nested-donut-segment-stroke-width);
|
|
40
|
-
stroke: var(--vis-nested-donut-segment-stroke-color, var(--vis-donut-background-color));
|
|
41
|
-
`;
|
|
42
|
-
const segmentLabel = css `
|
|
43
|
-
label: segment-label;
|
|
44
|
-
text-anchor: middle;
|
|
45
|
-
dominant-baseline: middle;
|
|
46
|
-
`;
|
|
47
|
-
const segmentExit = css `
|
|
48
|
-
label: segment-exit;
|
|
49
|
-
`;
|
|
50
|
-
const centralLabel = css `
|
|
51
|
-
label: central-label;
|
|
52
|
-
text-anchor: middle;
|
|
53
|
-
dominant-baseline: middle;
|
|
54
|
-
font-size: var(--vis-nested-donut-central-label-font-size);
|
|
55
|
-
font-family: var(--vis-nested-donut-central-label-font-family, var(--vis-font-family));
|
|
56
|
-
font-weight: var(--vis-nested-donut-central-label-font-weight);
|
|
57
|
-
fill: var(--vis-nested-donut-central-label-text-color);
|
|
58
|
-
`;
|
|
59
|
-
const centralSubLabel = css `
|
|
60
|
-
label: central-sub-label;
|
|
61
|
-
text-anchor: middle;
|
|
62
|
-
dominant-baseline: middle;
|
|
63
|
-
font-size: var(--vis-nested-donut-central-sublabel-font-size);
|
|
64
|
-
font-family: var(--vis-nested-donut-central-sublabel-font-family, var(--vis-font-family));
|
|
65
|
-
font-weight: var(--vis-nested-donut-central-sublabel-font-weight);
|
|
66
|
-
fill: var(--vis-nested-donut-central-sublabel-text-color);
|
|
67
|
-
`;
|
|
68
|
-
|
|
69
|
-
export { background, centralLabel, centralSubLabel, labelColors, root, segment, segmentExit, segmentLabel, variables };
|
|
70
|
-
//# sourceMappingURL=style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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\nexport const labelColors = {\n dark: '#5b5f6d',\n light: '#fff',\n}\n\nconst cssVarDefaults = {\n '--vis-nested-donut-background-color': '#E7E9F3',\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n '--vis-nested-donut-font-family': undefined,\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': labelColors.dark,\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': labelColors.dark,\n\n // Segments\n '--vis-nested-donut-segment-stroke-width': '1px',\n '--vis-nested-donut-segment-stroke-color': '',\n\n /* Dark theme */\n '--vis-dark-nested-donut-background-color': '#18160C',\n '--vis-dark-nested-donut-central-label-text-color': labelColors.light,\n '--vis-dark-nested-donut-central-sublabel-text-color': labelColors.light,\n}\n\nexport const root = css`\n label: nested-donut-component;\n`\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const background = css`\n label: background;\n fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n label: segment;\n stroke-width: var(--vis-nested-donut-segment-stroke-width);\n stroke: var(--vis-nested-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentLabel = css`\n label: segment-label;\n text-anchor: middle;\n dominant-baseline: middle;\n`\n\nexport const segmentExit = css`\n label: segment-exit;\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,MAAA,WAAW,GAAG;AACzB,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE,MAAM;EACd;AAED,MAAM,cAAc,GAAG;AACrB,IAAA,qCAAqC,EAAE,SAAS;;AAEhD,IAAA,gCAAgC,EAAE,SAAS;;AAG3C,IAAA,4CAA4C,EAAE,MAAM;AACpD,IAAA,8CAA8C,EAAE,GAAG;IACnD,6CAA6C,EAAE,WAAW,CAAC,IAAI;;AAG/D,IAAA,+CAA+C,EAAE,OAAO;AACxD,IAAA,iDAAiD,EAAE,GAAG;IACtD,gDAAgD,EAAE,WAAW,CAAC,IAAI;;AAGlE,IAAA,yCAAyC,EAAE,KAAK;AAChD,IAAA,yCAAyC,EAAE,EAAE;;AAG7C,IAAA,0CAA0C,EAAE,SAAS;IACrD,kDAAkD,EAAE,WAAW,CAAC,KAAK;IACrE,qDAAqD,EAAE,WAAW,CAAC,KAAK;CACzE,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;EAIzB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;EAI9B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { HierarchyRectangularNode } from 'd3-hierarchy';
|
|
2
|
-
export declare type NestedDonutSegmentDatum<Datum> = {
|
|
3
|
-
key: string;
|
|
4
|
-
root?: string;
|
|
5
|
-
values?: (Datum | NestedDonutSegmentDatum<Datum>)[];
|
|
6
|
-
};
|
|
7
|
-
export declare type NestedDonutSegment<Datum> = HierarchyRectangularNode<NestedDonutSegmentDatum<Datum>> & {
|
|
8
|
-
_id: string;
|
|
9
|
-
_layer: number;
|
|
10
|
-
_index?: number;
|
|
11
|
-
_state?: {
|
|
12
|
-
fill?: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
export declare enum NestedDonutDirection {
|
|
16
|
-
INWARDS = "inwards",
|
|
17
|
-
OUTWARDS = "outwards"
|
|
18
|
-
}
|
|
19
|
-
export declare type NestedDonutLayerSettings = {
|
|
20
|
-
width?: number;
|
|
21
|
-
};
|
|
22
|
-
export declare const defaultLayerSettings: {
|
|
23
|
-
width: number;
|
|
24
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var NestedDonutDirection;
|
|
2
|
-
(function (NestedDonutDirection) {
|
|
3
|
-
NestedDonutDirection["INWARDS"] = "inwards";
|
|
4
|
-
NestedDonutDirection["OUTWARDS"] = "outwards";
|
|
5
|
-
})(NestedDonutDirection || (NestedDonutDirection = {}));
|
|
6
|
-
const defaultLayerSettings = {
|
|
7
|
-
width: 50,
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export { NestedDonutDirection, defaultLayerSettings };
|
|
11
|
-
//# sourceMappingURL=types.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/nested-donut/types.ts"],"sourcesContent":["import { HierarchyRectangularNode } from 'd3-hierarchy'\n\nexport type NestedDonutSegmentDatum<Datum> = {\n key: string;\n root?: string;\n values?: (Datum | NestedDonutSegmentDatum<Datum>)[];\n}\n\nexport type NestedDonutSegment<Datum> = HierarchyRectangularNode<NestedDonutSegmentDatum<Datum>> & {\n _id: string;\n _layer: number;\n _index?: number;\n _state?: {\n fill?: string;\n };\n}\n\nexport enum NestedDonutDirection {\n INWARDS = 'inwards',\n OUTWARDS = 'outwards',\n}\n\nexport type NestedDonutLayerSettings = {\n width?: number;\n}\n\nexport const defaultLayerSettings = {\n width: 50,\n}\n"],"names":[],"mappings":"IAiBY,qBAGX;AAHD,CAAA,UAAY,oBAAoB,EAAA;AAC9B,IAAA,oBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,oBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,GAG/B,EAAA,CAAA,CAAA,CAAA;AAMY,MAAA,oBAAoB,GAAG;AAClC,IAAA,KAAK,EAAE,EAAE;;;;;"}
|