@triptease/tt-bar-chart 1.0.4 → 1.0.6
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/dist/src/TtBarChart.d.ts +2 -0
- package/dist/src/TtBarChart.js +10 -3
- package/dist/src/TtBarChart.js.map +1 -1
- package/dist/src/types.d.ts +26 -9
- package/dist/src/types.js.map +1 -1
- package/dist/src/utils.d.ts +1 -1
- package/dist/src/utils.js +4 -3
- package/dist/src/utils.js.map +1 -1
- package/package.json +1 -1
package/dist/src/TtBarChart.d.ts
CHANGED
package/dist/src/TtBarChart.js
CHANGED
|
@@ -8,7 +8,7 @@ import { html, LitElement } from 'lit';
|
|
|
8
8
|
// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
|
|
9
9
|
import * as echarts from 'echarts';
|
|
10
10
|
import { property, query, state } from 'lit/decorators.js';
|
|
11
|
-
import {
|
|
11
|
+
import { loadingAnimation, valueFormatter } from './utils.js';
|
|
12
12
|
// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250
|
|
13
13
|
import { AriaComponent } from 'echarts/components';
|
|
14
14
|
import { defaultColorPalette } from './colors.js';
|
|
@@ -127,7 +127,7 @@ export class TtBarChart extends LitElement {
|
|
|
127
127
|
type: this.direction === 'horizontal' ? 'value' : 'category',
|
|
128
128
|
data: this.direction === 'horizontal' ? undefined : labels,
|
|
129
129
|
axisLabel: {
|
|
130
|
-
formatter:
|
|
130
|
+
formatter: (value) => valueFormatter(value, this.direction === 'horizontal' ? this.valuePrefix : undefined, this.direction === 'horizontal' ? this.valueSuffix : undefined),
|
|
131
131
|
color: '#3b353b', //--text-400
|
|
132
132
|
},
|
|
133
133
|
splitLine: { show: this.direction === 'horizontal' },
|
|
@@ -142,7 +142,7 @@ export class TtBarChart extends LitElement {
|
|
|
142
142
|
type: this.direction === 'horizontal' ? 'category' : 'value',
|
|
143
143
|
data: this.direction === 'horizontal' ? labels : undefined,
|
|
144
144
|
axisLabel: {
|
|
145
|
-
formatter:
|
|
145
|
+
formatter: (value) => valueFormatter(value, this.direction === 'horizontal' ? undefined : this.valuePrefix, this.direction === 'horizontal' ? undefined : this.valueSuffix),
|
|
146
146
|
color: '#3b353b', //--text-400
|
|
147
147
|
},
|
|
148
148
|
splitLine: { show: this.direction === 'vertical' },
|
|
@@ -158,6 +158,7 @@ export class TtBarChart extends LitElement {
|
|
|
158
158
|
axisPointer: {
|
|
159
159
|
type: 'shadow',
|
|
160
160
|
},
|
|
161
|
+
valueFormatter: (value) => valueFormatter(value, this.valuePrefix, this.valueSuffix),
|
|
161
162
|
},
|
|
162
163
|
series,
|
|
163
164
|
};
|
|
@@ -186,6 +187,12 @@ __decorate([
|
|
|
186
187
|
__decorate([
|
|
187
188
|
property({ type: String, attribute: 'height' })
|
|
188
189
|
], TtBarChart.prototype, "height", void 0);
|
|
190
|
+
__decorate([
|
|
191
|
+
property({ type: String, attribute: 'value-prefix' })
|
|
192
|
+
], TtBarChart.prototype, "valuePrefix", void 0);
|
|
193
|
+
__decorate([
|
|
194
|
+
property({ type: String, attribute: 'value-suffix' })
|
|
195
|
+
], TtBarChart.prototype, "valueSuffix", void 0);
|
|
189
196
|
__decorate([
|
|
190
197
|
state()
|
|
191
198
|
], TtBarChart.prototype, "chart", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../src/TtBarChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ChartDirection, Dataset } from './types.js';\nimport { axesFormatter, loadingAnimation } from './utils.js';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport { AriaComponent } from 'echarts/components';\nimport { defaultColorPalette } from './colors.js';\nimport { isTtDataset } from '@triptease/tt-dataset';\nimport { isTtDataPoint } from '@triptease/tt-data-point';\n\nconst constructChartData = (ttDatasetElements: Element[]) => {\n if (!ttDatasetElements.every(isTtDataset)) {\n throw new Error(\"Children of element 'tt-bar-chart' must be 'tt-dataset' elements.\");\n }\n\n const datasets: Dataset[] = ttDatasetElements.map((ttDataset) => {\n const datasetLabel = ttDataset.getAttribute('label');\n if (!datasetLabel) throw new Error(\"Attribute 'label' on element 'tt-dataset' is required\");\n\n const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));\n if (!ttDataPoints.every(isTtDataPoint)) {\n throw new Error(\"Children of element 'tt-dataset' must be 'tt-data-point' elements\");\n }\n\n const data = ttDataPoints.map((ttDataPoint) => {\n const dataPointLabel = ttDataPoint.getAttribute('label');\n if (!dataPointLabel) throw new Error(\"Attribute 'label' on element 'tt-data-point' is required\");\n\n const valueRaw = ttDataPoint.getAttribute('value');\n const value = valueRaw ? Number(valueRaw) : undefined;\n if (value !== undefined && Number.isNaN(value)) {\n throw new Error(\"Attribute 'value' on element 'tt-data-point' is not a valid number\");\n }\n\n return { label: dataPointLabel, value };\n });\n\n return { label: datasetLabel, data };\n });\n\n return datasets;\n};\n\nexport class TtBarChart extends LitElement {\n @property({ type: String })\n direction: ChartDirection = 'horizontal';\n\n @property({ type: String, attribute: 'x-axis-title' })\n xAxisTitle?: string;\n\n @property({ type: String, attribute: 'y-axis-title' })\n yAxisTitle?: string;\n\n @property({ type: Boolean, attribute: 'stacked' })\n stacked: boolean = false;\n\n @property({ type: Boolean, attribute: 'loading' })\n loading: boolean = false;\n\n @property({ type: String, attribute: 'width' })\n width: string = '100%';\n\n @property({ type: String, attribute: 'height' })\n height: string = '100%';\n\n @state()\n chart: echarts.ECharts | null = null;\n\n @query('slot')\n private defaultSlot!: HTMLSlotElement;\n\n private loadingPulseTimer: number | undefined;\n private slotObserver: MutationObserver | null = null;\n\n render() {\n return html`\n <div style=\"width: ${this.width}; height:${this.height};\">\n <div id=${this.id} style=\"width:${this.width}; height:${this.height};\"></div>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n\n protected handleSlotChange() {\n this.slotObserver?.disconnect();\n this.slotObserver = new MutationObserver(() => this.requestUpdate());\n this.defaultSlot.assignedElements().forEach((el) => {\n this.slotObserver!.observe(el, { childList: true, attributes: true, subtree: true });\n });\n this.requestUpdate();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.slotObserver?.disconnect();\n }\n\n protected firstUpdated() {\n if (this.chart === null) {\n echarts.use([AriaComponent]);\n const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;\n\n if (!divElement) {\n throw new Error('No div element');\n }\n\n this.chart = echarts.init(divElement);\n }\n }\n\n protected updated() {\n if (this.loadingPulseTimer) {\n window.clearInterval(this.loadingPulseTimer);\n }\n\n if (this.loading && this.chart) {\n this.setAttribute('aria-busy', 'true');\n const pulseTimer = loadingAnimation(this.chart, this.direction);\n this.loadingPulseTimer = pulseTimer;\n } else {\n this.removeAttribute('aria-busy');\n\n const datasets = constructChartData(this.defaultSlot.assignedElements());\n\n const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));\n const labels = [...new Set(labelsRaw)];\n\n const series: echarts.SeriesOption[] = datasets.map((dataset, i) => ({\n name: dataset.label,\n type: 'bar',\n data: labels.map((label) => {\n const point = dataset.data.find((dp) => dp.label === label);\n return point?.value ?? null;\n }),\n stack: this.stacked ? 'A' : undefined,\n color: defaultColorPalette[i],\n cursor: 'default',\n }));\n\n const option: echarts.EChartsOption = {\n aria: {\n show: true,\n },\n legend: {\n show: datasets.length > 1,\n textStyle: {\n color: '#3b353b', //--text-400\n },\n },\n xAxis: {\n name: this.xAxisTitle,\n nameTextStyle: {\n lineHeight: 40,\n color: '#575157', //--text-300\n },\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'value' : 'category',\n data: this.direction === 'horizontal' ? undefined : labels,\n axisLabel: {\n formatter: axesFormatter,\n color: '#3b353b', //--text-400\n },\n splitLine: { show: this.direction === 'horizontal' },\n },\n yAxis: {\n name: this.yAxisTitle,\n nameTextStyle: {\n lineHeight: 40,\n color: '#575157', //--text-300\n },\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'category' : 'value',\n data: this.direction === 'horizontal' ? labels : undefined,\n axisLabel: {\n formatter: axesFormatter,\n color: '#3b353b', //--text-400\n },\n splitLine: { show: this.direction === 'vertical' },\n },\n grid: {\n left: 0,\n right: 0,\n top: 0,\n ...(datasets.length > 1 ? {} : { bottom: 0 }),\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow',\n },\n },\n series,\n };\n\n this.chart.setOption(option, { notMerge: true });\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TtBarChart.js","sourceRoot":"","sources":["../../src/TtBarChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ChartDirection, Dataset } from './types.js';\nimport { loadingAnimation, valueFormatter } from './utils.js';\n// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport { AriaComponent } from 'echarts/components';\nimport { defaultColorPalette } from './colors.js';\nimport { isTtDataset } from '@triptease/tt-dataset';\nimport { isTtDataPoint } from '@triptease/tt-data-point';\n\nconst constructChartData = (ttDatasetElements: Element[]) => {\n if (!ttDatasetElements.every(isTtDataset)) {\n throw new Error(\"Children of element 'tt-bar-chart' must be 'tt-dataset' elements.\");\n }\n\n const datasets: Dataset[] = ttDatasetElements.map((ttDataset) => {\n const datasetLabel = ttDataset.getAttribute('label');\n if (!datasetLabel) throw new Error(\"Attribute 'label' on element 'tt-dataset' is required\");\n\n const ttDataPoints = Array.from(ttDataset.querySelectorAll('tt-data-point'));\n if (!ttDataPoints.every(isTtDataPoint)) {\n throw new Error(\"Children of element 'tt-dataset' must be 'tt-data-point' elements\");\n }\n\n const data = ttDataPoints.map((ttDataPoint) => {\n const dataPointLabel = ttDataPoint.getAttribute('label');\n if (!dataPointLabel) throw new Error(\"Attribute 'label' on element 'tt-data-point' is required\");\n\n const valueRaw = ttDataPoint.getAttribute('value');\n const value = valueRaw ? Number(valueRaw) : undefined;\n if (value !== undefined && Number.isNaN(value)) {\n throw new Error(\"Attribute 'value' on element 'tt-data-point' is not a valid number\");\n }\n\n return { label: dataPointLabel, value };\n });\n\n return { label: datasetLabel, data };\n });\n\n return datasets;\n};\n\nexport class TtBarChart extends LitElement {\n @property({ type: String })\n direction: ChartDirection = 'horizontal';\n\n @property({ type: String, attribute: 'x-axis-title' })\n xAxisTitle?: string;\n\n @property({ type: String, attribute: 'y-axis-title' })\n yAxisTitle?: string;\n\n @property({ type: Boolean, attribute: 'stacked' })\n stacked: boolean = false;\n\n @property({ type: Boolean, attribute: 'loading' })\n loading: boolean = false;\n\n @property({ type: String, attribute: 'width' })\n width: string = '100%';\n\n @property({ type: String, attribute: 'height' })\n height: string = '100%';\n\n @property({ type: String, attribute: 'value-prefix' })\n valuePrefix?: string;\n\n @property({ type: String, attribute: 'value-suffix' })\n valueSuffix?: string;\n\n @state()\n chart: echarts.ECharts | null = null;\n\n @query('slot')\n private defaultSlot!: HTMLSlotElement;\n\n private loadingPulseTimer: number | undefined;\n private slotObserver: MutationObserver | null = null;\n\n render() {\n return html`\n <div style=\"width: ${this.width}; height:${this.height};\">\n <div id=${this.id} style=\"width:${this.width}; height:${this.height};\"></div>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n\n protected handleSlotChange() {\n this.slotObserver?.disconnect();\n this.slotObserver = new MutationObserver(() => this.requestUpdate());\n this.defaultSlot.assignedElements().forEach((el) => {\n this.slotObserver!.observe(el, { childList: true, attributes: true, subtree: true });\n });\n this.requestUpdate();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.slotObserver?.disconnect();\n }\n\n protected firstUpdated() {\n if (this.chart === null) {\n echarts.use([AriaComponent]);\n const divElement = this.renderRoot.querySelector(`#${this.id}`) as HTMLDivElement;\n\n if (!divElement) {\n throw new Error('No div element');\n }\n\n this.chart = echarts.init(divElement);\n }\n }\n\n protected updated() {\n if (this.loadingPulseTimer) {\n window.clearInterval(this.loadingPulseTimer);\n }\n\n if (this.loading && this.chart) {\n this.setAttribute('aria-busy', 'true');\n const pulseTimer = loadingAnimation(this.chart, this.direction);\n this.loadingPulseTimer = pulseTimer;\n } else {\n this.removeAttribute('aria-busy');\n\n const datasets = constructChartData(this.defaultSlot.assignedElements());\n\n const labelsRaw = datasets.flatMap((dataset) => dataset.data.map((datapoint) => datapoint.label));\n const labels = [...new Set(labelsRaw)];\n\n const series: echarts.SeriesOption[] = datasets.map((dataset, i) => ({\n name: dataset.label,\n type: 'bar',\n data: labels.map((label) => {\n const point = dataset.data.find((dp) => dp.label === label);\n return point?.value ?? null;\n }),\n stack: this.stacked ? 'A' : undefined,\n color: defaultColorPalette[i],\n cursor: 'default',\n }));\n\n const option: echarts.EChartsOption = {\n aria: {\n show: true,\n },\n legend: {\n show: datasets.length > 1,\n textStyle: {\n color: '#3b353b', //--text-400\n },\n },\n xAxis: {\n name: this.xAxisTitle,\n nameTextStyle: {\n lineHeight: 40,\n color: '#575157', //--text-300\n },\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'value' : 'category',\n data: this.direction === 'horizontal' ? undefined : labels,\n axisLabel: {\n formatter: (value: number | string) =>\n valueFormatter(\n value,\n this.direction === 'horizontal' ? this.valuePrefix : undefined,\n this.direction === 'horizontal' ? this.valueSuffix : undefined\n ),\n color: '#3b353b', //--text-400\n },\n splitLine: { show: this.direction === 'horizontal' },\n },\n yAxis: {\n name: this.yAxisTitle,\n nameTextStyle: {\n lineHeight: 40,\n color: '#575157', //--text-300\n },\n nameLocation: 'center',\n type: this.direction === 'horizontal' ? 'category' : 'value',\n data: this.direction === 'horizontal' ? labels : undefined,\n axisLabel: {\n formatter: (value: number | string) =>\n valueFormatter(\n value,\n this.direction === 'horizontal' ? undefined : this.valuePrefix,\n this.direction === 'horizontal' ? undefined : this.valueSuffix\n ),\n color: '#3b353b', //--text-400\n },\n splitLine: { show: this.direction === 'vertical' },\n },\n grid: {\n left: 0,\n right: 0,\n top: 0,\n ...(datasets.length > 1 ? {} : { bottom: 0 }),\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow',\n },\n valueFormatter: (value: number | string) => valueFormatter(value, this.valuePrefix, this.valueSuffix),\n },\n series,\n };\n\n this.chart.setOption(option, { notMerge: true });\n }\n }\n}\n"]}
|
package/dist/src/types.d.ts
CHANGED
|
@@ -8,23 +8,40 @@ export interface Dataset {
|
|
|
8
8
|
data: DataPoint[];
|
|
9
9
|
}
|
|
10
10
|
export type ChartDirection = 'horizontal' | 'vertical';
|
|
11
|
+
interface TtBarChartExternalAttributes {
|
|
12
|
+
id: string;
|
|
13
|
+
width?: string;
|
|
14
|
+
height?: string;
|
|
15
|
+
direction?: ChartDirection;
|
|
16
|
+
'x-axis-title'?: string;
|
|
17
|
+
'y-axis-title'?: string;
|
|
18
|
+
stacked?: boolean;
|
|
19
|
+
loading?: boolean;
|
|
20
|
+
'value-prefix'?: string;
|
|
21
|
+
'value-suffix'?: string;
|
|
22
|
+
}
|
|
11
23
|
declare global {
|
|
12
24
|
interface HTMLElementTagNameMap {
|
|
13
25
|
'tt-bar-chart': TtBarChart;
|
|
14
26
|
}
|
|
15
27
|
namespace JSX {
|
|
16
28
|
interface IntrinsicElements {
|
|
17
|
-
'tt-bar-chart': {
|
|
18
|
-
id: string;
|
|
19
|
-
width?: string;
|
|
20
|
-
height?: string;
|
|
29
|
+
'tt-bar-chart': TtBarChartExternalAttributes & {
|
|
21
30
|
children?: Element | Element[];
|
|
22
|
-
|
|
23
|
-
'x-axis-title'?: string;
|
|
24
|
-
'y-axis-title'?: string;
|
|
25
|
-
stacked?: boolean;
|
|
26
|
-
loading?: boolean;
|
|
31
|
+
style?: string;
|
|
27
32
|
};
|
|
28
33
|
}
|
|
29
34
|
}
|
|
35
|
+
namespace React {
|
|
36
|
+
namespace JSX {
|
|
37
|
+
interface IntrinsicElements {
|
|
38
|
+
'tt-bar-chart': TtBarChartExternalAttributes & {
|
|
39
|
+
ref?: React.Ref<unknown>;
|
|
40
|
+
children?: React.ReactNode;
|
|
41
|
+
style?: React.CSSProperties;
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
30
46
|
}
|
|
47
|
+
export {};
|
package/dist/src/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nexport interface DataPoint {\n label: string;\n value: number | undefined;\n}\n\nexport interface Dataset {\n label: string;\n data: DataPoint[];\n}\n\nexport type ChartDirection = 'horizontal' | 'vertical';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-bar-chart': TtBarChart;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-bar-chart':
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtBarChart } from './TtBarChart.js';\n\nexport interface DataPoint {\n label: string;\n value: number | undefined;\n}\n\nexport interface Dataset {\n label: string;\n data: DataPoint[];\n}\n\nexport type ChartDirection = 'horizontal' | 'vertical';\n\ninterface TtBarChartExternalAttributes {\n id: string;\n width?: string;\n height?: string;\n direction?: ChartDirection;\n 'x-axis-title'?: string;\n 'y-axis-title'?: string;\n stacked?: boolean;\n loading?: boolean;\n 'value-prefix'?: string;\n 'value-suffix'?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-bar-chart': TtBarChart;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-bar-chart': TtBarChartExternalAttributes & { children?: Element | Element[]; style?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-bar-chart': TtBarChartExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n };\n }\n }\n }\n}\n"]}
|
package/dist/src/utils.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as echarts from 'echarts';
|
|
2
2
|
import { ChartDirection } from './types.js';
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const valueFormatter: (value: number | string, prefix: string | undefined, suffix: string | undefined) => string;
|
|
4
4
|
export declare const loadingAnimation: (chart: echarts.ECharts, direction: ChartDirection) => number;
|
package/dist/src/utils.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
const numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 2 });
|
|
2
|
-
export const
|
|
2
|
+
export const valueFormatter = (value, prefix, suffix) => {
|
|
3
|
+
let formattedValue = value;
|
|
3
4
|
if (typeof value === 'number') {
|
|
4
|
-
|
|
5
|
+
formattedValue = numericalAxesFormatter.format(value);
|
|
5
6
|
}
|
|
6
|
-
return value
|
|
7
|
+
return `${prefix ?? ''}${formattedValue ?? value}${suffix ?? ''}`;
|
|
7
8
|
};
|
|
8
9
|
const SKELETON_ITEMS = 4;
|
|
9
10
|
const PULSE_INTERVAL = 1500;
|
package/dist/src/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// @ts-expect-error Known error - https://github.com/apache/echarts/issues/21250\nimport * as echarts from 'echarts';\nimport { ChartDirection } from './types.js';\n\nconst numericalAxesFormatter = new Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 2 });\n\nexport const valueFormatter = (value: number | string, prefix: string | undefined, suffix: string | undefined) => {\n let formattedValue = value;\n\n if (typeof value === 'number') {\n formattedValue = numericalAxesFormatter.format(value);\n }\n\n return `${prefix ?? ''}${formattedValue ?? value}${suffix ?? ''}`;\n};\n\nconst SKELETON_ITEMS = 4;\nconst PULSE_INTERVAL = 1500;\n\nexport const loadingAnimation = (chart: echarts.ECharts, direction: ChartDirection) => {\n const isHorizontal = direction === 'horizontal';\n\n const generateData = () => Array.from({ length: SKELETON_ITEMS }, () => Math.round(30 + Math.random() * 50));\n\n const baseAxis = {\n axisLabel: { show: false },\n axisTick: { show: false },\n axisLine: { show: false },\n splitLine: { show: false },\n };\n\n chart.setOption(\n {\n animation: true,\n animationDuration: 800,\n animationEasing: 'cubicInOut',\n\n grid: {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n containLabel: false,\n },\n\n xAxis: isHorizontal\n ? { ...baseAxis, type: 'value' }\n : {\n ...baseAxis,\n type: 'category',\n data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n },\n\n yAxis: isHorizontal\n ? {\n ...baseAxis,\n type: 'category',\n data: Array.from({ length: SKELETON_ITEMS }, () => ''),\n }\n : { ...baseAxis, type: 'value' },\n\n series: [\n {\n type: 'bar',\n data: generateData(),\n silent: true,\n animationDurationUpdate: 800,\n itemStyle: {\n color: '#e5e7eb',\n },\n emphasis: { disabled: true },\n },\n ],\n },\n true\n );\n\n const pulseTimer = window.setInterval(() => {\n chart.setOption({\n series: [{ data: generateData() }],\n });\n }, PULSE_INTERVAL);\n\n return pulseTimer;\n};\n"]}
|
package/package.json
CHANGED