@apipass/design-system 5.2.0 → 5.4.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/dist/lib/charts.index.cjs +1 -1
- package/dist/lib/charts.index.js +10 -6
- package/dist/lib/charts.index.js.map +1 -1
- package/dist/lib/embedded-styles.js +2 -2
- package/dist/lib/style.css +1 -1
- package/dist/lib/ui/components/charts/BarChart/BarChart.cjs +1 -1
- package/dist/lib/ui/components/charts/BarChart/BarChart.cjs.map +1 -1
- package/dist/lib/ui/components/charts/BarChart/BarChart.js +66 -48
- package/dist/lib/ui/components/charts/BarChart/BarChart.js.map +1 -1
- package/dist/lib/ui/components/charts/BarChart/bar-chart-option.cjs +1 -1
- package/dist/lib/ui/components/charts/BarChart/bar-chart-option.cjs.map +1 -1
- package/dist/lib/ui/components/charts/BarChart/bar-chart-option.js +71 -81
- package/dist/lib/ui/components/charts/BarChart/bar-chart-option.js.map +1 -1
- package/dist/lib/ui/components/charts/ChartColorPicker/ChartColorPicker.cjs +2 -0
- package/dist/lib/ui/components/charts/ChartColorPicker/ChartColorPicker.cjs.map +1 -0
- package/dist/lib/ui/components/charts/ChartColorPicker/ChartColorPicker.js +99 -0
- package/dist/lib/ui/components/charts/ChartColorPicker/ChartColorPicker.js.map +1 -0
- package/dist/lib/ui/components/charts/ChartLegend/ChartLegend.cjs +2 -0
- package/dist/lib/ui/components/charts/ChartLegend/ChartLegend.cjs.map +1 -0
- package/dist/lib/ui/components/charts/ChartLegend/ChartLegend.js +47 -0
- package/dist/lib/ui/components/charts/ChartLegend/ChartLegend.js.map +1 -0
- package/dist/lib/ui/components/charts/ChartLegend/use-chart-legend.cjs +2 -0
- package/dist/lib/ui/components/charts/ChartLegend/use-chart-legend.cjs.map +1 -0
- package/dist/lib/ui/components/charts/ChartLegend/use-chart-legend.js +34 -0
- package/dist/lib/ui/components/charts/ChartLegend/use-chart-legend.js.map +1 -0
- package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.cjs +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.cjs.map +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.js +63 -45
- package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.js.map +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs.map +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js +31 -41
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js.map +1 -1
- package/dist/lib/ui/primitives/Table/Table.cjs +1 -1
- package/dist/lib/ui/primitives/Table/Table.cjs.map +1 -1
- package/dist/lib/ui/primitives/Table/Table.js +68 -52
- package/dist/lib/ui/primitives/Table/Table.js.map +1 -1
- package/dist/types/charts.index.d.ts +2 -0
- package/dist/types/ui/components/charts/BarChart/BarChart.d.ts +4 -1
- package/dist/types/ui/components/charts/BarChart/bar-chart-option.d.ts +0 -1
- package/dist/types/ui/components/charts/ChartColorPicker/ChartColorPicker.d.ts +18 -0
- package/dist/types/ui/components/charts/ChartLegend/ChartLegend.d.ts +21 -0
- package/dist/types/ui/components/charts/ChartLegend/use-chart-legend.d.ts +14 -0
- package/dist/types/ui/components/charts/TimeSeriesChart/TimeSeriesChart.d.ts +4 -1
- package/dist/types/ui/components/charts/TimeSeriesChart/time-series-option.d.ts +0 -1
- package/dist/types/ui/primitives/Table/Table.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),T=require("../../../../vendor/clsx/dist/clsx.cjs"),C=require("react"),_=require("../useChartInstance.cjs"),m=require("../ChartLegend/ChartLegend.cjs"),p=require("../ChartLegend/use-chart-legend.cjs"),y=require("./bar-chart-option.cjs");;/* empty css */const M={};function E({categories:n,series:r,orientation:o="vertical",stacking:i="off",valueLabel:c="auto",legend:g="inline",valueAxis:a=M,valueFormatter:l,onSeriesColorChange:f,legendLabels:S,className:b,...q}){const{containerRef:I,chart:s,theme:e,resolveSeriesColor:O}=_.useChartInstance(),{items:j,colorsBySeriesId:u,colorTokensBySeriesId:v,hiddenSeriesIds:d,toggleSeries:x}=p.useChartLegend(r,(e==null?void 0:e.seriesColors)??[],O),h=C.useMemo(()=>r.filter(L=>!d.has(L.id)),[r,d]);C.useEffect(()=>{!s||!e||s.setOption(y.buildBarChartOption({categories:n,series:h,orientation:o,stacking:i,valueLabel:c,valueAxis:a,theme:e,seriesColorOverrides:u,valueFormatter:l}),{notMerge:!0})},[s,e,n,h,o,i,c,a,u,l]);const B=g!=="none"&&r.length>0;return t.jsxs("div",{className:T.clsx("bar-chart",b),...q,children:[B&&t.jsx(m.ChartLegend,{items:j,onToggle:x,onColorChange:f,colorTokensBySeriesId:v,labels:S}),t.jsx("div",{ref:I,className:"bar-chart__canvas"})]})}exports.BarChart=E;
|
|
2
2
|
//# sourceMappingURL=BarChart.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.cjs","sources":["../../../../../../src/ui/components/charts/BarChart/BarChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect } from \"react\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n buildBarChartOption,\n type BarChartLegendMode,\n type BarChartOrientation,\n type BarChartSeriesData,\n type BarChartStacking,\n type BarChartValueAxisOptions,\n type BarChartValueLabel,\n} from \"./bar-chart-option\";\nimport \"./bar-chart.css\";\n\nexport type {\n BarChartAxisScale,\n BarChartLegendMode,\n BarChartOrientation,\n BarChartPoint,\n BarChartSeriesData,\n BarChartStacking,\n BarChartValueAxisOptions,\n BarChartValueLabel,\n} from \"./bar-chart-option\";\n\nexport type BarChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n categories: string[];\n series: BarChartSeriesData[];\n orientation?: BarChartOrientation;\n stacking?: BarChartStacking;\n valueLabel?: BarChartValueLabel;\n legend?: BarChartLegendMode;\n valueAxis?: BarChartValueAxisOptions;\n valueFormatter?: (value: number) => string;\n};\n\nconst EMPTY_VALUE_AXIS_OPTIONS: BarChartValueAxisOptions = {};\n\nexport function BarChart({\n categories,\n series,\n orientation = \"vertical\",\n stacking = \"off\",\n valueLabel = \"auto\",\n legend = \"inline\",\n valueAxis = EMPTY_VALUE_AXIS_OPTIONS,\n valueFormatter,\n className,\n ...props\n}: BarChartProps) {\n const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n\n
|
|
1
|
+
{"version":3,"file":"BarChart.cjs","sources":["../../../../../../src/ui/components/charts/BarChart/BarChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo } from \"react\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport { ChartLegend, type ChartLegendLabels } from \"../ChartLegend/ChartLegend\";\nimport { useChartLegend, type ChartLegendState } from \"../ChartLegend/use-chart-legend\";\nimport {\n buildBarChartOption,\n type BarChartLegendMode,\n type BarChartOrientation,\n type BarChartSeriesData,\n type BarChartStacking,\n type BarChartValueAxisOptions,\n type BarChartValueLabel,\n} from \"./bar-chart-option\";\nimport \"./bar-chart.css\";\n\nexport type {\n BarChartAxisScale,\n BarChartLegendMode,\n BarChartOrientation,\n BarChartPoint,\n BarChartSeriesData,\n BarChartStacking,\n BarChartValueAxisOptions,\n BarChartValueLabel,\n} from \"./bar-chart-option\";\n\nexport type BarChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n categories: string[];\n series: BarChartSeriesData[];\n orientation?: BarChartOrientation;\n stacking?: BarChartStacking;\n valueLabel?: BarChartValueLabel;\n legend?: BarChartLegendMode;\n valueAxis?: BarChartValueAxisOptions;\n valueFormatter?: (value: number) => string;\n // Habilita o seletor de cor no marcador da legenda. Sem ele o marcador é só desenho — o gráfico\n // que não tem onde guardar a escolha não pode oferecê-la.\n onSeriesColorChange?: (seriesId: string, colorToken: string | null) => void;\n legendLabels?: Partial<ChartLegendLabels>;\n};\n\nconst EMPTY_VALUE_AXIS_OPTIONS: BarChartValueAxisOptions = {};\n\nexport function BarChart({\n categories,\n series,\n orientation = \"vertical\",\n stacking = \"off\",\n valueLabel = \"auto\",\n legend = \"inline\",\n valueAxis = EMPTY_VALUE_AXIS_OPTIONS,\n valueFormatter,\n onSeriesColorChange,\n legendLabels,\n className,\n ...props\n}: BarChartProps) {\n const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n\n const {\n items,\n colorsBySeriesId,\n colorTokensBySeriesId,\n hiddenSeriesIds,\n toggleSeries,\n }: ChartLegendState =\n useChartLegend(series, theme?.seriesColors ?? [], resolveSeriesColor);\n\n // A série escondida sai da opção inteira, em vez de ficar com a seleção desligada do ECharts: é\n // o que faz o eixo reescalar sobre o que restou, e o empilhamento 100% recalcular a participação\n // sem ela.\n const visibleSeries: BarChartSeriesData[] = useMemo(\n () => series.filter((data: BarChartSeriesData) => !hiddenSeriesIds.has(data.id)),\n [series, hiddenSeriesIds],\n );\n\n useEffect(() => {\n if (!chart || !theme) return;\n\n // `notMerge` evita que uma série removida da configuração continue desenhada: o ECharts\n // casa séries por id e mantém as que não aparecem na opção nova.\n chart.setOption(\n buildBarChartOption({\n categories,\n series: visibleSeries,\n orientation,\n stacking,\n valueLabel,\n valueAxis,\n theme,\n seriesColorOverrides: colorsBySeriesId,\n valueFormatter,\n }),\n { notMerge: true },\n );\n }, [\n chart,\n theme,\n categories,\n visibleSeries,\n orientation,\n stacking,\n valueLabel,\n valueAxis,\n colorsBySeriesId,\n valueFormatter,\n ]);\n\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n\n return (\n <div className={clsx(\"bar-chart\", className)} {...props}>\n {isLegendVisible && (\n <ChartLegend\n items={items}\n onToggle={toggleSeries}\n onColorChange={onSeriesColorChange}\n colorTokensBySeriesId={colorTokensBySeriesId}\n labels={legendLabels}\n />\n )}\n <div ref={containerRef} className=\"bar-chart__canvas\" />\n </div>\n );\n}\n"],"names":["EMPTY_VALUE_AXIS_OPTIONS","BarChart","categories","series","orientation","stacking","valueLabel","legend","valueAxis","valueFormatter","onSeriesColorChange","legendLabels","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","items","colorsBySeriesId","colorTokensBySeriesId","hiddenSeriesIds","toggleSeries","useChartLegend","visibleSeries","useMemo","data","useEffect","buildBarChartOption","isLegendVisible","jsxs","clsx","jsx","ChartLegend"],"mappings":"gYA0CA,MAAMA,EAAqD,CAAA,EAEpD,SAASC,EAAS,CACvB,WAAAC,EACA,OAAAC,EACA,YAAAC,EAAc,WACd,SAAAC,EAAW,MACX,WAAAC,EAAa,OACb,OAAAC,EAAS,SACT,UAAAC,EAAYR,EACZ,eAAAS,EACA,oBAAAC,EACA,aAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAkB,CAChB,KAAM,CAAE,aAAAC,EAAc,MAAAC,EAAO,MAAAC,EAAO,mBAAAC,CAAA,EAAsCC,EAAAA,iBAAA,EAEpE,CACJ,MAAAC,EACA,iBAAAC,EACA,sBAAAC,EACA,gBAAAC,EACA,aAAAC,CAAA,EAEAC,EAAAA,eAAerB,GAAQa,GAAA,YAAAA,EAAO,eAAgB,CAAA,EAAIC,CAAkB,EAKhEQ,EAAsCC,EAAAA,QAC1C,IAAMvB,EAAO,OAAQwB,GAA6B,CAACL,EAAgB,IAAIK,EAAK,EAAE,CAAC,EAC/E,CAACxB,EAAQmB,CAAe,CAAA,EAG1BM,EAAAA,UAAU,IAAM,CACV,CAACb,GAAS,CAACC,GAIfD,EAAM,UACJc,sBAAoB,CAClB,WAAA3B,EACA,OAAQuB,EACR,YAAArB,EACA,SAAAC,EACA,WAAAC,EACA,UAAAE,EACA,MAAAQ,EACA,qBAAsBI,EACtB,eAAAX,CAAA,CACD,EACD,CAAE,SAAU,EAAA,CAAK,CAErB,EAAG,CACDM,EACAC,EACAd,EACAuB,EACArB,EACAC,EACAC,EACAE,EACAY,EACAX,CAAA,CACD,EAED,MAAMqB,EAA2BvB,IAAW,QAAUJ,EAAO,OAAS,EAEtE,OACE4B,EAAAA,KAAC,OAAI,UAAWC,EAAAA,KAAK,YAAapB,CAAS,EAAI,GAAGC,EAC/C,SAAA,CAAAiB,GACCG,EAAAA,IAACC,EAAAA,YAAA,CACC,MAAAf,EACA,SAAUI,EACV,cAAeb,EACf,sBAAAW,EACA,OAAQV,CAAA,CAAA,EAGZsB,EAAAA,IAAC,MAAA,CAAI,IAAKnB,EAAc,UAAU,mBAAA,CAAoB,CAAA,EACxD,CAEJ"}
|
|
@@ -1,61 +1,79 @@
|
|
|
1
|
-
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
-
import { clsx as
|
|
3
|
-
import {
|
|
4
|
-
import { useChartInstance as
|
|
5
|
-
import {
|
|
1
|
+
import { jsxs as T, jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as x } from "../../../../vendor/clsx/dist/clsx.js";
|
|
3
|
+
import { useMemo as E, useEffect as L } from "react";
|
|
4
|
+
import { useChartInstance as M } from "../useChartInstance.js";
|
|
5
|
+
import { ChartLegend as N } from "../ChartLegend/ChartLegend.js";
|
|
6
|
+
import { useChartLegend as j } from "../ChartLegend/use-chart-legend.js";
|
|
7
|
+
import { buildBarChartOption as y } from "./bar-chart-option.js";
|
|
6
8
|
/* empty css */
|
|
7
|
-
const
|
|
8
|
-
function
|
|
9
|
-
categories:
|
|
10
|
-
series:
|
|
11
|
-
orientation:
|
|
12
|
-
stacking:
|
|
13
|
-
valueLabel:
|
|
14
|
-
legend:
|
|
15
|
-
valueAxis:
|
|
16
|
-
valueFormatter:
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
const P = {};
|
|
10
|
+
function w({
|
|
11
|
+
categories: s,
|
|
12
|
+
series: e,
|
|
13
|
+
orientation: t = "vertical",
|
|
14
|
+
stacking: i = "off",
|
|
15
|
+
valueLabel: n = "auto",
|
|
16
|
+
legend: h = "inline",
|
|
17
|
+
valueAxis: c = P,
|
|
18
|
+
valueFormatter: l,
|
|
19
|
+
onSeriesColorChange: p,
|
|
20
|
+
legendLabels: C,
|
|
21
|
+
className: g,
|
|
22
|
+
...S
|
|
19
23
|
}) {
|
|
20
|
-
const { containerRef:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
24
|
+
const { containerRef: u, chart: o, theme: r, resolveSeriesColor: I } = M(), {
|
|
25
|
+
items: b,
|
|
26
|
+
colorsBySeriesId: a,
|
|
27
|
+
colorTokensBySeriesId: O,
|
|
28
|
+
hiddenSeriesIds: m,
|
|
29
|
+
toggleSeries: _
|
|
30
|
+
} = j(e, (r == null ? void 0 : r.seriesColors) ?? [], I), f = E(
|
|
31
|
+
() => e.filter((B) => !m.has(B.id)),
|
|
32
|
+
[e, m]
|
|
33
|
+
);
|
|
34
|
+
L(() => {
|
|
35
|
+
!o || !r || o.setOption(
|
|
36
|
+
y({
|
|
37
|
+
categories: s,
|
|
38
|
+
series: f,
|
|
39
|
+
orientation: t,
|
|
40
|
+
stacking: i,
|
|
41
|
+
valueLabel: n,
|
|
42
|
+
valueAxis: c,
|
|
43
|
+
theme: r,
|
|
44
|
+
seriesColorOverrides: a,
|
|
45
|
+
valueFormatter: l
|
|
41
46
|
}),
|
|
42
47
|
{ notMerge: !0 }
|
|
43
48
|
);
|
|
44
49
|
}, [
|
|
50
|
+
o,
|
|
45
51
|
r,
|
|
46
|
-
|
|
47
|
-
a,
|
|
52
|
+
s,
|
|
48
53
|
f,
|
|
49
|
-
|
|
50
|
-
c,
|
|
51
|
-
e,
|
|
54
|
+
t,
|
|
52
55
|
i,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
n,
|
|
57
|
+
c,
|
|
58
|
+
a,
|
|
59
|
+
l
|
|
60
|
+
]);
|
|
61
|
+
const v = h !== "none" && e.length > 0;
|
|
62
|
+
return /* @__PURE__ */ T("div", { className: x("bar-chart", g), ...S, children: [
|
|
63
|
+
v && /* @__PURE__ */ d(
|
|
64
|
+
N,
|
|
65
|
+
{
|
|
66
|
+
items: b,
|
|
67
|
+
onToggle: _,
|
|
68
|
+
onColorChange: p,
|
|
69
|
+
colorTokensBySeriesId: O,
|
|
70
|
+
labels: C
|
|
71
|
+
}
|
|
72
|
+
),
|
|
73
|
+
/* @__PURE__ */ d("div", { ref: u, className: "bar-chart__canvas" })
|
|
74
|
+
] });
|
|
57
75
|
}
|
|
58
76
|
export {
|
|
59
|
-
|
|
77
|
+
w as BarChart
|
|
60
78
|
};
|
|
61
79
|
//# sourceMappingURL=BarChart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sources":["../../../../../../src/ui/components/charts/BarChart/BarChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect } from \"react\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n buildBarChartOption,\n type BarChartLegendMode,\n type BarChartOrientation,\n type BarChartSeriesData,\n type BarChartStacking,\n type BarChartValueAxisOptions,\n type BarChartValueLabel,\n} from \"./bar-chart-option\";\nimport \"./bar-chart.css\";\n\nexport type {\n BarChartAxisScale,\n BarChartLegendMode,\n BarChartOrientation,\n BarChartPoint,\n BarChartSeriesData,\n BarChartStacking,\n BarChartValueAxisOptions,\n BarChartValueLabel,\n} from \"./bar-chart-option\";\n\nexport type BarChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n categories: string[];\n series: BarChartSeriesData[];\n orientation?: BarChartOrientation;\n stacking?: BarChartStacking;\n valueLabel?: BarChartValueLabel;\n legend?: BarChartLegendMode;\n valueAxis?: BarChartValueAxisOptions;\n valueFormatter?: (value: number) => string;\n};\n\nconst EMPTY_VALUE_AXIS_OPTIONS: BarChartValueAxisOptions = {};\n\nexport function BarChart({\n categories,\n series,\n orientation = \"vertical\",\n stacking = \"off\",\n valueLabel = \"auto\",\n legend = \"inline\",\n valueAxis = EMPTY_VALUE_AXIS_OPTIONS,\n valueFormatter,\n className,\n ...props\n}: BarChartProps) {\n const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n\n
|
|
1
|
+
{"version":3,"file":"BarChart.js","sources":["../../../../../../src/ui/components/charts/BarChart/BarChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo } from \"react\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport { ChartLegend, type ChartLegendLabels } from \"../ChartLegend/ChartLegend\";\nimport { useChartLegend, type ChartLegendState } from \"../ChartLegend/use-chart-legend\";\nimport {\n buildBarChartOption,\n type BarChartLegendMode,\n type BarChartOrientation,\n type BarChartSeriesData,\n type BarChartStacking,\n type BarChartValueAxisOptions,\n type BarChartValueLabel,\n} from \"./bar-chart-option\";\nimport \"./bar-chart.css\";\n\nexport type {\n BarChartAxisScale,\n BarChartLegendMode,\n BarChartOrientation,\n BarChartPoint,\n BarChartSeriesData,\n BarChartStacking,\n BarChartValueAxisOptions,\n BarChartValueLabel,\n} from \"./bar-chart-option\";\n\nexport type BarChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n categories: string[];\n series: BarChartSeriesData[];\n orientation?: BarChartOrientation;\n stacking?: BarChartStacking;\n valueLabel?: BarChartValueLabel;\n legend?: BarChartLegendMode;\n valueAxis?: BarChartValueAxisOptions;\n valueFormatter?: (value: number) => string;\n // Habilita o seletor de cor no marcador da legenda. Sem ele o marcador é só desenho — o gráfico\n // que não tem onde guardar a escolha não pode oferecê-la.\n onSeriesColorChange?: (seriesId: string, colorToken: string | null) => void;\n legendLabels?: Partial<ChartLegendLabels>;\n};\n\nconst EMPTY_VALUE_AXIS_OPTIONS: BarChartValueAxisOptions = {};\n\nexport function BarChart({\n categories,\n series,\n orientation = \"vertical\",\n stacking = \"off\",\n valueLabel = \"auto\",\n legend = \"inline\",\n valueAxis = EMPTY_VALUE_AXIS_OPTIONS,\n valueFormatter,\n onSeriesColorChange,\n legendLabels,\n className,\n ...props\n}: BarChartProps) {\n const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n\n const {\n items,\n colorsBySeriesId,\n colorTokensBySeriesId,\n hiddenSeriesIds,\n toggleSeries,\n }: ChartLegendState =\n useChartLegend(series, theme?.seriesColors ?? [], resolveSeriesColor);\n\n // A série escondida sai da opção inteira, em vez de ficar com a seleção desligada do ECharts: é\n // o que faz o eixo reescalar sobre o que restou, e o empilhamento 100% recalcular a participação\n // sem ela.\n const visibleSeries: BarChartSeriesData[] = useMemo(\n () => series.filter((data: BarChartSeriesData) => !hiddenSeriesIds.has(data.id)),\n [series, hiddenSeriesIds],\n );\n\n useEffect(() => {\n if (!chart || !theme) return;\n\n // `notMerge` evita que uma série removida da configuração continue desenhada: o ECharts\n // casa séries por id e mantém as que não aparecem na opção nova.\n chart.setOption(\n buildBarChartOption({\n categories,\n series: visibleSeries,\n orientation,\n stacking,\n valueLabel,\n valueAxis,\n theme,\n seriesColorOverrides: colorsBySeriesId,\n valueFormatter,\n }),\n { notMerge: true },\n );\n }, [\n chart,\n theme,\n categories,\n visibleSeries,\n orientation,\n stacking,\n valueLabel,\n valueAxis,\n colorsBySeriesId,\n valueFormatter,\n ]);\n\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n\n return (\n <div className={clsx(\"bar-chart\", className)} {...props}>\n {isLegendVisible && (\n <ChartLegend\n items={items}\n onToggle={toggleSeries}\n onColorChange={onSeriesColorChange}\n colorTokensBySeriesId={colorTokensBySeriesId}\n labels={legendLabels}\n />\n )}\n <div ref={containerRef} className=\"bar-chart__canvas\" />\n </div>\n );\n}\n"],"names":["EMPTY_VALUE_AXIS_OPTIONS","BarChart","categories","series","orientation","stacking","valueLabel","legend","valueAxis","valueFormatter","onSeriesColorChange","legendLabels","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","items","colorsBySeriesId","colorTokensBySeriesId","hiddenSeriesIds","toggleSeries","useChartLegend","visibleSeries","useMemo","data","useEffect","buildBarChartOption","isLegendVisible","jsxs","clsx","jsx","ChartLegend"],"mappings":";;;;;;;;AA0CA,MAAMA,IAAqD,CAAA;AAEpD,SAASC,EAAS;AAAA,EACvB,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAYR;AAAA,EACZ,gBAAAS;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,OAAAC,GAAO,oBAAAC,EAAA,IAAsCC,EAAA,GAEpE;AAAA,IACJ,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,IAEAC,EAAerB,IAAQa,KAAA,gBAAAA,EAAO,iBAAgB,CAAA,GAAIC,CAAkB,GAKhEQ,IAAsCC;AAAA,IAC1C,MAAMvB,EAAO,OAAO,CAACwB,MAA6B,CAACL,EAAgB,IAAIK,EAAK,EAAE,CAAC;AAAA,IAC/E,CAACxB,GAAQmB,CAAe;AAAA,EAAA;AAG1B,EAAAM,EAAU,MAAM;AACd,IAAI,CAACb,KAAS,CAACC,KAIfD,EAAM;AAAA,MACJc,EAAoB;AAAA,QAClB,YAAA3B;AAAA,QACA,QAAQuB;AAAA,QACR,aAAArB;AAAA,QACA,UAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAAE;AAAA,QACA,OAAAQ;AAAA,QACA,sBAAsBI;AAAA,QACtB,gBAAAX;AAAA,MAAA,CACD;AAAA,MACD,EAAE,UAAU,GAAA;AAAA,IAAK;AAAA,EAErB,GAAG;AAAA,IACDM;AAAA,IACAC;AAAA,IACAd;AAAA,IACAuB;AAAA,IACArB;AAAA,IACAC;AAAA,IACAC;AAAA,IACAE;AAAA,IACAY;AAAA,IACAX;AAAA,EAAA,CACD;AAED,QAAMqB,IAA2BvB,MAAW,UAAUJ,EAAO,SAAS;AAEtE,SACE,gBAAA4B,EAAC,SAAI,WAAWC,EAAK,aAAapB,CAAS,GAAI,GAAGC,GAC/C,UAAA;AAAA,IAAAiB,KACC,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUI;AAAA,QACV,eAAeb;AAAA,QACf,uBAAAW;AAAA,QACA,QAAQV;AAAA,MAAA;AAAA,IAAA;AAAA,IAGZ,gBAAAsB,EAAC,OAAA,EAAI,KAAKnB,GAAc,WAAU,oBAAA,CAAoB;AAAA,EAAA,GACxD;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y={top:16,right:16,bottom:16,left:16},p={vertical:140,horizontal:200},A=48,_="total",s=100,h="#ffffff",T="#1e1e1e",I=.0144,E=1;function N(e){const t=e/255;return t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4)}function O(e){const t=e.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);if(t){const r=t[1],a=r.length===3?r.split("").map(n=>n+n).join(""):r;return[0,2,4].map(n=>parseInt(a.slice(n,n+2),16))}const o=e.trim().match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i);if(o)return[Number(o[1]),Number(o[2]),Number(o[3])]}function w(e){const t=O(e);if(!t)return;const[o,r,a]=t.map(N);return .2126*o+.7152*r+.0722*a}function L(e,t){return(e+.05)/(t+.05)}function F(e){const t=w(e);if(t===void 0)return h;const o=L(E,t);return L(t,I)>=o?T:h}const B=new Intl.NumberFormat(void 0,{style:"percent",maximumFractionDigits:1});function S(e){return B.format(e/s)}function k(e){return e.stacking==="percent"?S:e.valueFormatter}function c(e){const t=k(e);if(t)return o=>o===null?"":t(o)}function D(e,t){const o=new Map(e.points.map(r=>[r.category,r.value]));return t.map(r=>o.get(r)??null)}function M(e,t){const o=Array.from({length:t},(r,a)=>e.reduce((n,i)=>n+(i[a]??0),0));return e.map(r=>r.map((a,n)=>{const i=o[n];return a===null||i===0?null:a/i*s}))}function b(e){return e.stacking!=="off"?"inside":e.orientation==="horizontal"?"right":"top"}function P(e){return e.labelRect.width<=e.rect.width&&e.labelRect.height<=e.rect.height}function R(e){const t=e.valueLabel==="auto";return!t||b(e)!=="inside"?{hideOverlap:t}:o=>({hideOverlap:t,fontSize:P(o)?void 0:0})}function V(e,t){const o=b(e),r=c(e);return{show:e.valueLabel!=="never",position:o,color:o==="inside"?F(t):e.theme.labelColor,formatter:r?a=>r(a.value):void 0}}function z(e){const{categories:t,theme:o,orientation:r}=e;return{type:"category",data:t,inverse:r==="horizontal",axisLine:{lineStyle:{color:o.axisLineColor}},axisTick:{show:!1},axisLabel:{color:o.labelColor,hideOverlap:!0,width:p[r],overflow:"truncate"},splitLine:{show:!1}}}function H(e){const{valueAxis:t,stacking:o,theme:r}=e,a=o==="percent",n=c(e);return{type:t.scale==="log"?"log":"value",scale:!a&&t.includeZero===!1,min:a?0:t.min,max:a?s:t.max,axisLine:{show:!1},axisLabel:{color:r.labelColor,formatter:n},splitLine:{lineStyle:{color:r.splitLineColor}}}}function G(e){const{categories:t,series:o,orientation:r,stacking:a,theme:n}=e,i=r==="horizontal",C=c(e),u=o.map(l=>D(l,t)),v=a==="percent"?M(u,t.length):u,x=R(e),f=z(e),m=H(e);return{animation:!1,color:n.seriesColors,textStyle:{fontFamily:n.fontFamily,color:n.labelColor},grid:{...y,containLabel:!0},tooltip:{trigger:"axis",axisPointer:{type:"shadow"},backgroundColor:n.tooltipBackgroundColor,borderColor:n.tooltipBorderColor,textStyle:{color:n.labelColor},valueFormatter:C},xAxis:i?m:f,yAxis:i?f:m,series:o.map((l,d)=>{const g=e.seriesColorOverrides[l.id]??n.seriesColors[d%n.seriesColors.length];return{id:l.id,name:l.name,type:"bar",stack:a==="off"?void 0:_,barMaxWidth:A,data:v[d],itemStyle:{color:g},label:V(e,g),labelLayout:x}})}}exports.buildBarChartOption=G;
|
|
2
2
|
//# sourceMappingURL=bar-chart-option.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar-chart-option.cjs","sources":["../../../../../../src/ui/components/charts/BarChart/bar-chart-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface BarChartPoint {\n category: string;\n value: number | null;\n}\n\nexport interface BarChartSeriesData {\n id: string;\n name: string;\n points: BarChartPoint[];\n // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n // recebe a próxima cor da paleta.\n colorToken?: string;\n}\n\nexport type BarChartOrientation = \"vertical\" | \"horizontal\";\n\nexport type BarChartStacking = \"off\" | \"stacked\" | \"percent\";\n\nexport type BarChartValueLabel = \"auto\" | \"always\" | \"never\";\n\nexport type BarChartLegendMode = \"inline\" | \"none\";\n\nexport type BarChartAxisScale = \"linear\" | \"log\";\n\nexport interface BarChartValueAxisOptions {\n scale?: BarChartAxisScale;\n min?: number;\n max?: number;\n includeZero?: boolean;\n}\n\nexport interface BarChartOptionInput {\n categories: string[];\n series: BarChartSeriesData[];\n orientation: BarChartOrientation;\n stacking: BarChartStacking;\n valueLabel: BarChartValueLabel;\n legend: BarChartLegendMode;\n valueAxis: BarChartValueAxisOptions;\n theme: ChartTheme;\n seriesColorOverrides: Record<string, string>;\n valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 16, left: 16 } as const;\n\n// Na horizontal o rótulo da categoria disputa largura com a própria barra; na vertical ele fica\n// sob a barra e uma faixa mais estreita já dá conta.\nconst CATEGORY_LABEL_MAX_WIDTH_PX: Record<BarChartOrientation, number> = {\n vertical: 140,\n horizontal: 200,\n};\n\nconst BAR_MAX_WIDTH_PX: number = 48;\n\nconst STACK_ID: string = \"total\";\n\nconst PERCENT_SCALE: number = 100;\n\n// O rótulo dentro da barra é lido contra a cor da série, não contra o fundo da página: a paleta\n// de séries é a mesma nos dois temas, então quem decide entre texto claro e escuro é o\n// preenchimento. O branco que o ECharts usa por padrão reprova no contraste em toda a paleta —\n// 2,24:1 sobre a `yellow-500`.\nconst LABEL_ON_DARK_FILL: string = \"#ffffff\";\n\nconst LABEL_ON_LIGHT_FILL: string = \"#1e1e1e\";\n\nconst LABEL_ON_LIGHT_FILL_LUMINANCE: number = 0.0144;\n\nconst WHITE_LUMINANCE: number = 1;\n\nfunction channelLuminance(channel: number): number {\n const normalized: number = channel / 255;\n return normalized <= 0.03928\n ? normalized / 12.92\n : Math.pow((normalized + 0.055) / 1.055, 2.4);\n}\n\nfunction parseColorChannels(color: string): [number, number, number] | undefined {\n const hexMatch: RegExpMatchArray | null = color\n .trim()\n .match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);\n if (hexMatch) {\n const digits: string = hexMatch[1];\n const expanded: string =\n digits.length === 3\n ? digits\n .split(\"\")\n .map((digit: string) => digit + digit)\n .join(\"\")\n : digits;\n return [0, 2, 4].map((start: number) => parseInt(expanded.slice(start, start + 2), 16)) as [\n number,\n number,\n number,\n ];\n }\n\n const rgbMatch: RegExpMatchArray | null = color\n .trim()\n .match(/^rgba?\\(\\s*(\\d+)[\\s,]+(\\d+)[\\s,]+(\\d+)/i);\n if (rgbMatch) {\n return [Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3])];\n }\n\n return undefined;\n}\n\nfunction relativeLuminance(color: string): number | undefined {\n const channels: [number, number, number] | undefined = parseColorChannels(color);\n if (!channels) return undefined;\n const [red, green, blue] = channels.map(channelLuminance);\n return 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n}\n\nfunction contrastRatio(lighter: number, darker: number): number {\n return (lighter + 0.05) / (darker + 0.05);\n}\n\nfunction labelColorOnFill(fillColor: string): string {\n const luminance: number | undefined = relativeLuminance(fillColor);\n if (luminance === undefined) return LABEL_ON_DARK_FILL;\n const againstLightText: number = contrastRatio(WHITE_LUMINANCE, luminance);\n const againstDarkText: number = contrastRatio(luminance, LABEL_ON_LIGHT_FILL_LUMINANCE);\n return againstDarkText >= againstLightText ? LABEL_ON_LIGHT_FILL : LABEL_ON_DARK_FILL;\n}\n\nconst PERCENT_LABEL: Intl.NumberFormat = new Intl.NumberFormat(undefined, {\n style: \"percent\",\n maximumFractionDigits: 1,\n});\n\nfunction formatPercent(value: number): string {\n return PERCENT_LABEL.format(value / PERCENT_SCALE);\n}\n\n// Em `percent` o valor desenhado é a participação na categoria, e não mais o dado do consumidor:\n// aplicar ali o formatador dele escreveria \"31 ms\" numa barra que vale 31%.\nfunction resolveValueFormatter(input: BarChartOptionInput): ((value: number) => string) | undefined {\n return input.stacking === \"percent\" ? formatPercent : input.valueFormatter;\n}\n\n// Categoria sem valor chega ao formatter como `null` — o ECharts formata o vazio junto com o\n// resto. O tipo público promete `number` ao consumidor, e é esta guarda que mantém a promessa.\nfunction nullSafeValueFormatter(\n input: BarChartOptionInput,\n): ((value: number | null) => string) | undefined {\n const formatValue: ((value: number) => string) | undefined = resolveValueFormatter(input);\n if (!formatValue) return undefined;\n return (value: number | null) => (value === null ? \"\" : formatValue(value));\n}\n\nfunction alignValuesToCategories(\n data: BarChartSeriesData,\n categories: string[],\n): Array<number | null> {\n const valueByCategory: Map<string, number | null> = new Map(\n data.points.map((point: BarChartPoint) => [point.category, point.value]),\n );\n return categories.map((category: string) => valueByCategory.get(category) ?? null);\n}\n\nfunction toShareOfCategoryTotal(\n valuesBySeries: Array<Array<number | null>>,\n categoryCount: number,\n): Array<Array<number | null>> {\n const categoryTotals: number[] = Array.from(\n { length: categoryCount },\n (_unused, categoryIndex: number) =>\n valuesBySeries.reduce(\n (total: number, values: Array<number | null>) => total + (values[categoryIndex] ?? 0),\n 0,\n ),\n );\n return valuesBySeries.map((values: Array<number | null>) =>\n values.map((value: number | null, categoryIndex: number) => {\n const categoryTotal: number = categoryTotals[categoryIndex];\n if (value === null || categoryTotal === 0) return null;\n return (value / categoryTotal) * PERCENT_SCALE;\n }),\n );\n}\n\nfunction labelPosition(input: BarChartOptionInput): string {\n if (input.stacking !== \"off\") return \"inside\";\n return input.orientation === \"horizontal\" ? \"right\" : \"top\";\n}\n\ninterface LabelLayoutParams {\n rect: { width: number; height: number };\n labelRect: { width: number; height: number };\n}\n\ninterface LabelLayout {\n hideOverlap: boolean;\n fontSize?: number;\n}\n\ntype SeriesLabelLayout = LabelLayout | ((params: LabelLayoutParams) => LabelLayout);\n\nfunction fitsInsideBar(params: LabelLayoutParams): boolean {\n return (\n params.labelRect.width <= params.rect.width && params.labelRect.height <= params.rect.height\n );\n}\n\n// `hideOverlap` resolve rótulo que encosta em rótulo, mas não rótulo maior que a própria fatia:\n// numa barra empilhada o ECharts desenha o número por cima das fatias vizinhas. `fontSize: 0` é\n// o que o `labelLayout` oferece para sumir com um rótulo caso a caso.\nfunction seriesLabelLayout(input: BarChartOptionInput): SeriesLabelLayout {\n const hideOverlap: boolean = input.valueLabel === \"auto\";\n if (!hideOverlap || labelPosition(input) !== \"inside\") return { hideOverlap };\n return (params: LabelLayoutParams) => ({\n hideOverlap,\n fontSize: fitsInsideBar(params) ? undefined : 0,\n });\n}\n\nfunction seriesLabel(input: BarChartOptionInput, fillColor: string): Record<string, unknown> {\n const position: string = labelPosition(input);\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n return {\n show: input.valueLabel !== \"never\",\n position,\n color: position === \"inside\" ? labelColorOnFill(fillColor) : input.theme.labelColor,\n formatter: formatValue\n ? (params: { value: number | null }) => formatValue(params.value)\n : undefined,\n };\n}\n\nfunction categoryAxis(input: BarChartOptionInput): Record<string, unknown> {\n const { categories, theme, orientation } = input;\n return {\n type: \"category\",\n data: categories,\n // Na horizontal o ECharts empilha a categoria de baixo para cima, invertendo a ordem que o\n // app escolheu ao ordenar as barras.\n inverse: orientation === \"horizontal\",\n axisLine: { lineStyle: { color: theme.axisLineColor } },\n axisTick: { show: false },\n axisLabel: {\n color: theme.labelColor,\n hideOverlap: true,\n width: CATEGORY_LABEL_MAX_WIDTH_PX[orientation],\n overflow: \"truncate\",\n },\n splitLine: { show: false },\n };\n}\n\nfunction valueAxis(input: BarChartOptionInput): Record<string, unknown> {\n const { valueAxis: options, stacking, theme } = input;\n const isPercent: boolean = stacking === \"percent\";\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n return {\n type: options.scale === \"log\" ? \"log\" : \"value\",\n // Barra mede por comprimento: eixo cortado mente sobre a proporção entre as barras, então\n // aqui o zero entra por padrão — ao contrário da série temporal, que só mostra variação.\n scale: !isPercent && options.includeZero === false,\n min: isPercent ? 0 : options.min,\n max: isPercent ? PERCENT_SCALE : options.max,\n axisLine: { show: false },\n axisLabel: { color: theme.labelColor, formatter: formatValue },\n splitLine: { lineStyle: { color: theme.splitLineColor } },\n };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildBarChartOption(input: BarChartOptionInput): Record<string, unknown> {\n const { categories, series, orientation, stacking, legend, theme } = input;\n const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n const isHorizontal: boolean = orientation === \"horizontal\";\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n const alignedValues: Array<Array<number | null>> = series.map((data: BarChartSeriesData) =>\n alignValuesToCategories(data, categories),\n );\n // O ECharts não tem empilhamento 100%: a participação precisa chegar calculada no dado.\n const plottedValues: Array<Array<number | null>> =\n stacking === \"percent\"\n ? toShareOfCategoryTotal(alignedValues, categories.length)\n : alignedValues;\n\n const labelLayout: SeriesLabelLayout = seriesLabelLayout(input);\n const categoryAxisOption: Record<string, unknown> = categoryAxis(input);\n const valueAxisOption: Record<string, unknown> = valueAxis(input);\n\n return {\n animation: false,\n color: theme.seriesColors,\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n ...GRID_WITHOUT_LEGEND,\n top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n containLabel: true,\n },\n legend: isLegendVisible\n ? {\n type: \"scroll\",\n top: 0,\n left: 0,\n icon: \"roundRect\",\n itemHeight: 8,\n itemWidth: 12,\n textStyle: { color: theme.labelColor },\n }\n : { show: false },\n tooltip: {\n trigger: \"axis\",\n axisPointer: { type: \"shadow\" },\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n valueFormatter: formatValue,\n },\n xAxis: isHorizontal ? valueAxisOption : categoryAxisOption,\n yAxis: isHorizontal ? categoryAxisOption : valueAxisOption,\n series: series.map((data: BarChartSeriesData, index: number) => {\n const fillColor: string =\n input.seriesColorOverrides[data.id] ??\n theme.seriesColors[index % theme.seriesColors.length];\n return {\n id: data.id,\n name: data.name,\n type: \"bar\",\n stack: stacking === \"off\" ? undefined : STACK_ID,\n barMaxWidth: BAR_MAX_WIDTH_PX,\n data: plottedValues[index],\n itemStyle: { color: fillColor },\n label: seriesLabel(input, fillColor),\n labelLayout,\n };\n }),\n };\n}\n"],"names":["LEGEND_HEIGHT_PX","GRID_WITHOUT_LEGEND","CATEGORY_LABEL_MAX_WIDTH_PX","BAR_MAX_WIDTH_PX","STACK_ID","PERCENT_SCALE","LABEL_ON_DARK_FILL","LABEL_ON_LIGHT_FILL","LABEL_ON_LIGHT_FILL_LUMINANCE","WHITE_LUMINANCE","channelLuminance","channel","normalized","parseColorChannels","color","hexMatch","digits","expanded","digit","start","rgbMatch","relativeLuminance","channels","red","green","blue","contrastRatio","lighter","darker","labelColorOnFill","fillColor","luminance","againstLightText","PERCENT_LABEL","formatPercent","value","resolveValueFormatter","input","nullSafeValueFormatter","formatValue","alignValuesToCategories","data","categories","valueByCategory","point","category","toShareOfCategoryTotal","valuesBySeries","categoryCount","categoryTotals","_unused","categoryIndex","total","values","categoryTotal","labelPosition","fitsInsideBar","params","seriesLabelLayout","hideOverlap","seriesLabel","position","categoryAxis","theme","orientation","valueAxis","options","stacking","isPercent","buildBarChartOption","series","legend","isLegendVisible","isHorizontal","alignedValues","plottedValues","labelLayout","categoryAxisOption","valueAxisOption","index"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"bar-chart-option.cjs","sources":["../../../../../../src/ui/components/charts/BarChart/bar-chart-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface BarChartPoint {\n category: string;\n value: number | null;\n}\n\nexport interface BarChartSeriesData {\n id: string;\n name: string;\n points: BarChartPoint[];\n // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n // recebe a próxima cor da paleta.\n colorToken?: string;\n}\n\nexport type BarChartOrientation = \"vertical\" | \"horizontal\";\n\nexport type BarChartStacking = \"off\" | \"stacked\" | \"percent\";\n\nexport type BarChartValueLabel = \"auto\" | \"always\" | \"never\";\n\nexport type BarChartLegendMode = \"inline\" | \"none\";\n\nexport type BarChartAxisScale = \"linear\" | \"log\";\n\nexport interface BarChartValueAxisOptions {\n scale?: BarChartAxisScale;\n min?: number;\n max?: number;\n includeZero?: boolean;\n}\n\nexport interface BarChartOptionInput {\n categories: string[];\n series: BarChartSeriesData[];\n orientation: BarChartOrientation;\n stacking: BarChartStacking;\n valueLabel: BarChartValueLabel;\n valueAxis: BarChartValueAxisOptions;\n theme: ChartTheme;\n seriesColorOverrides: Record<string, string>;\n valueFormatter?: (value: number) => string;\n}\n\n// A legenda saiu do canvas e virou HTML (`ChartLegend`), entao a grade nao reserva mais faixa\n// para ela: quem divide a altura agora e o flex do componente.\nconst GRID_PADDING = { top: 16, right: 16, bottom: 16, left: 16 } as const;\n\n// Na horizontal o rótulo da categoria disputa largura com a própria barra; na vertical ele fica\n// sob a barra e uma faixa mais estreita já dá conta.\nconst CATEGORY_LABEL_MAX_WIDTH_PX: Record<BarChartOrientation, number> = {\n vertical: 140,\n horizontal: 200,\n};\n\nconst BAR_MAX_WIDTH_PX: number = 48;\n\nconst STACK_ID: string = \"total\";\n\nconst PERCENT_SCALE: number = 100;\n\n// O rótulo dentro da barra é lido contra a cor da série, não contra o fundo da página: a paleta\n// de séries é a mesma nos dois temas, então quem decide entre texto claro e escuro é o\n// preenchimento. O branco que o ECharts usa por padrão reprova no contraste em toda a paleta —\n// 2,24:1 sobre a `yellow-500`.\nconst LABEL_ON_DARK_FILL: string = \"#ffffff\";\n\nconst LABEL_ON_LIGHT_FILL: string = \"#1e1e1e\";\n\nconst LABEL_ON_LIGHT_FILL_LUMINANCE: number = 0.0144;\n\nconst WHITE_LUMINANCE: number = 1;\n\nfunction channelLuminance(channel: number): number {\n const normalized: number = channel / 255;\n return normalized <= 0.03928\n ? normalized / 12.92\n : Math.pow((normalized + 0.055) / 1.055, 2.4);\n}\n\nfunction parseColorChannels(color: string): [number, number, number] | undefined {\n const hexMatch: RegExpMatchArray | null = color\n .trim()\n .match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);\n if (hexMatch) {\n const digits: string = hexMatch[1];\n const expanded: string =\n digits.length === 3\n ? digits\n .split(\"\")\n .map((digit: string) => digit + digit)\n .join(\"\")\n : digits;\n return [0, 2, 4].map((start: number) => parseInt(expanded.slice(start, start + 2), 16)) as [\n number,\n number,\n number,\n ];\n }\n\n const rgbMatch: RegExpMatchArray | null = color\n .trim()\n .match(/^rgba?\\(\\s*(\\d+)[\\s,]+(\\d+)[\\s,]+(\\d+)/i);\n if (rgbMatch) {\n return [Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3])];\n }\n\n return undefined;\n}\n\nfunction relativeLuminance(color: string): number | undefined {\n const channels: [number, number, number] | undefined = parseColorChannels(color);\n if (!channels) return undefined;\n const [red, green, blue] = channels.map(channelLuminance);\n return 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n}\n\nfunction contrastRatio(lighter: number, darker: number): number {\n return (lighter + 0.05) / (darker + 0.05);\n}\n\nfunction labelColorOnFill(fillColor: string): string {\n const luminance: number | undefined = relativeLuminance(fillColor);\n if (luminance === undefined) return LABEL_ON_DARK_FILL;\n const againstLightText: number = contrastRatio(WHITE_LUMINANCE, luminance);\n const againstDarkText: number = contrastRatio(luminance, LABEL_ON_LIGHT_FILL_LUMINANCE);\n return againstDarkText >= againstLightText ? LABEL_ON_LIGHT_FILL : LABEL_ON_DARK_FILL;\n}\n\nconst PERCENT_LABEL: Intl.NumberFormat = new Intl.NumberFormat(undefined, {\n style: \"percent\",\n maximumFractionDigits: 1,\n});\n\nfunction formatPercent(value: number): string {\n return PERCENT_LABEL.format(value / PERCENT_SCALE);\n}\n\n// Em `percent` o valor desenhado é a participação na categoria, e não mais o dado do consumidor:\n// aplicar ali o formatador dele escreveria \"31 ms\" numa barra que vale 31%.\nfunction resolveValueFormatter(input: BarChartOptionInput): ((value: number) => string) | undefined {\n return input.stacking === \"percent\" ? formatPercent : input.valueFormatter;\n}\n\n// Categoria sem valor chega ao formatter como `null` — o ECharts formata o vazio junto com o\n// resto. O tipo público promete `number` ao consumidor, e é esta guarda que mantém a promessa.\nfunction nullSafeValueFormatter(\n input: BarChartOptionInput,\n): ((value: number | null) => string) | undefined {\n const formatValue: ((value: number) => string) | undefined = resolveValueFormatter(input);\n if (!formatValue) return undefined;\n return (value: number | null) => (value === null ? \"\" : formatValue(value));\n}\n\nfunction alignValuesToCategories(\n data: BarChartSeriesData,\n categories: string[],\n): Array<number | null> {\n const valueByCategory: Map<string, number | null> = new Map(\n data.points.map((point: BarChartPoint) => [point.category, point.value]),\n );\n return categories.map((category: string) => valueByCategory.get(category) ?? null);\n}\n\nfunction toShareOfCategoryTotal(\n valuesBySeries: Array<Array<number | null>>,\n categoryCount: number,\n): Array<Array<number | null>> {\n const categoryTotals: number[] = Array.from(\n { length: categoryCount },\n (_unused, categoryIndex: number) =>\n valuesBySeries.reduce(\n (total: number, values: Array<number | null>) => total + (values[categoryIndex] ?? 0),\n 0,\n ),\n );\n return valuesBySeries.map((values: Array<number | null>) =>\n values.map((value: number | null, categoryIndex: number) => {\n const categoryTotal: number = categoryTotals[categoryIndex];\n if (value === null || categoryTotal === 0) return null;\n return (value / categoryTotal) * PERCENT_SCALE;\n }),\n );\n}\n\nfunction labelPosition(input: BarChartOptionInput): string {\n if (input.stacking !== \"off\") return \"inside\";\n return input.orientation === \"horizontal\" ? \"right\" : \"top\";\n}\n\ninterface LabelLayoutParams {\n rect: { width: number; height: number };\n labelRect: { width: number; height: number };\n}\n\ninterface LabelLayout {\n hideOverlap: boolean;\n fontSize?: number;\n}\n\ntype SeriesLabelLayout = LabelLayout | ((params: LabelLayoutParams) => LabelLayout);\n\nfunction fitsInsideBar(params: LabelLayoutParams): boolean {\n return (\n params.labelRect.width <= params.rect.width && params.labelRect.height <= params.rect.height\n );\n}\n\n// `hideOverlap` resolve rótulo que encosta em rótulo, mas não rótulo maior que a própria fatia:\n// numa barra empilhada o ECharts desenha o número por cima das fatias vizinhas. `fontSize: 0` é\n// o que o `labelLayout` oferece para sumir com um rótulo caso a caso.\nfunction seriesLabelLayout(input: BarChartOptionInput): SeriesLabelLayout {\n const hideOverlap: boolean = input.valueLabel === \"auto\";\n if (!hideOverlap || labelPosition(input) !== \"inside\") return { hideOverlap };\n return (params: LabelLayoutParams) => ({\n hideOverlap,\n fontSize: fitsInsideBar(params) ? undefined : 0,\n });\n}\n\nfunction seriesLabel(input: BarChartOptionInput, fillColor: string): Record<string, unknown> {\n const position: string = labelPosition(input);\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n return {\n show: input.valueLabel !== \"never\",\n position,\n color: position === \"inside\" ? labelColorOnFill(fillColor) : input.theme.labelColor,\n formatter: formatValue\n ? (params: { value: number | null }) => formatValue(params.value)\n : undefined,\n };\n}\n\nfunction categoryAxis(input: BarChartOptionInput): Record<string, unknown> {\n const { categories, theme, orientation } = input;\n return {\n type: \"category\",\n data: categories,\n // Na horizontal o ECharts empilha a categoria de baixo para cima, invertendo a ordem que o\n // app escolheu ao ordenar as barras.\n inverse: orientation === \"horizontal\",\n axisLine: { lineStyle: { color: theme.axisLineColor } },\n axisTick: { show: false },\n axisLabel: {\n color: theme.labelColor,\n hideOverlap: true,\n width: CATEGORY_LABEL_MAX_WIDTH_PX[orientation],\n overflow: \"truncate\",\n },\n splitLine: { show: false },\n };\n}\n\nfunction valueAxis(input: BarChartOptionInput): Record<string, unknown> {\n const { valueAxis: options, stacking, theme } = input;\n const isPercent: boolean = stacking === \"percent\";\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n return {\n type: options.scale === \"log\" ? \"log\" : \"value\",\n // Barra mede por comprimento: eixo cortado mente sobre a proporção entre as barras, então\n // aqui o zero entra por padrão — ao contrário da série temporal, que só mostra variação.\n scale: !isPercent && options.includeZero === false,\n min: isPercent ? 0 : options.min,\n max: isPercent ? PERCENT_SCALE : options.max,\n axisLine: { show: false },\n axisLabel: { color: theme.labelColor, formatter: formatValue },\n splitLine: { lineStyle: { color: theme.splitLineColor } },\n };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildBarChartOption(input: BarChartOptionInput): Record<string, unknown> {\n const { categories, series, orientation, stacking, theme } = input;\n const isHorizontal: boolean = orientation === \"horizontal\";\n const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n const alignedValues: Array<Array<number | null>> = series.map((data: BarChartSeriesData) =>\n alignValuesToCategories(data, categories),\n );\n // O ECharts não tem empilhamento 100%: a participação precisa chegar calculada no dado.\n const plottedValues: Array<Array<number | null>> =\n stacking === \"percent\"\n ? toShareOfCategoryTotal(alignedValues, categories.length)\n : alignedValues;\n\n const labelLayout: SeriesLabelLayout = seriesLabelLayout(input);\n const categoryAxisOption: Record<string, unknown> = categoryAxis(input);\n const valueAxisOption: Record<string, unknown> = valueAxis(input);\n\n return {\n animation: false,\n color: theme.seriesColors,\n textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n grid: {\n ...GRID_PADDING,\n containLabel: true,\n },\n tooltip: {\n trigger: \"axis\",\n axisPointer: { type: \"shadow\" },\n backgroundColor: theme.tooltipBackgroundColor,\n borderColor: theme.tooltipBorderColor,\n textStyle: { color: theme.labelColor },\n valueFormatter: formatValue,\n },\n xAxis: isHorizontal ? valueAxisOption : categoryAxisOption,\n yAxis: isHorizontal ? categoryAxisOption : valueAxisOption,\n series: series.map((data: BarChartSeriesData, index: number) => {\n const fillColor: string =\n input.seriesColorOverrides[data.id] ??\n theme.seriesColors[index % theme.seriesColors.length];\n return {\n id: data.id,\n name: data.name,\n type: \"bar\",\n stack: stacking === \"off\" ? undefined : STACK_ID,\n barMaxWidth: BAR_MAX_WIDTH_PX,\n data: plottedValues[index],\n itemStyle: { color: fillColor },\n label: seriesLabel(input, fillColor),\n labelLayout,\n };\n }),\n };\n}\n"],"names":["GRID_PADDING","CATEGORY_LABEL_MAX_WIDTH_PX","BAR_MAX_WIDTH_PX","STACK_ID","PERCENT_SCALE","LABEL_ON_DARK_FILL","LABEL_ON_LIGHT_FILL","LABEL_ON_LIGHT_FILL_LUMINANCE","WHITE_LUMINANCE","channelLuminance","channel","normalized","parseColorChannels","color","hexMatch","digits","expanded","digit","start","rgbMatch","relativeLuminance","channels","red","green","blue","contrastRatio","lighter","darker","labelColorOnFill","fillColor","luminance","againstLightText","PERCENT_LABEL","formatPercent","value","resolveValueFormatter","input","nullSafeValueFormatter","formatValue","alignValuesToCategories","data","categories","valueByCategory","point","category","toShareOfCategoryTotal","valuesBySeries","categoryCount","categoryTotals","_unused","categoryIndex","total","values","categoryTotal","labelPosition","fitsInsideBar","params","seriesLabelLayout","hideOverlap","seriesLabel","position","categoryAxis","theme","orientation","valueAxis","options","stacking","isPercent","buildBarChartOption","series","isHorizontal","alignedValues","plottedValues","labelLayout","categoryAxisOption","valueAxisOption","index"],"mappings":"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"}
|
|
@@ -1,176 +1,166 @@
|
|
|
1
|
-
const
|
|
1
|
+
const p = { top: 16, right: 16, bottom: 16, left: 16 }, y = {
|
|
2
2
|
vertical: 140,
|
|
3
3
|
horizontal: 200
|
|
4
|
-
},
|
|
5
|
-
function
|
|
4
|
+
}, A = 48, _ = "total", s = 100, d = "#ffffff", T = "#1e1e1e", I = 0.0144, E = 1;
|
|
5
|
+
function N(e) {
|
|
6
6
|
const t = e / 255;
|
|
7
7
|
return t <= 0.03928 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
|
|
8
8
|
}
|
|
9
|
-
function
|
|
9
|
+
function w(e) {
|
|
10
10
|
const t = e.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
|
|
11
11
|
if (t) {
|
|
12
|
-
const
|
|
13
|
-
return [0, 2, 4].map((
|
|
12
|
+
const r = t[1], a = r.length === 3 ? r.split("").map((n) => n + n).join("") : r;
|
|
13
|
+
return [0, 2, 4].map((n) => parseInt(a.slice(n, n + 2), 16));
|
|
14
14
|
}
|
|
15
15
|
const o = e.trim().match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i);
|
|
16
16
|
if (o)
|
|
17
17
|
return [Number(o[1]), Number(o[2]), Number(o[3])];
|
|
18
18
|
}
|
|
19
|
-
function
|
|
20
|
-
const t =
|
|
19
|
+
function F(e) {
|
|
20
|
+
const t = w(e);
|
|
21
21
|
if (!t) return;
|
|
22
|
-
const [o,
|
|
23
|
-
return 0.2126 * o + 0.7152 *
|
|
22
|
+
const [o, r, a] = t.map(N);
|
|
23
|
+
return 0.2126 * o + 0.7152 * r + 0.0722 * a;
|
|
24
24
|
}
|
|
25
|
-
function
|
|
25
|
+
function L(e, t) {
|
|
26
26
|
return (e + 0.05) / (t + 0.05);
|
|
27
27
|
}
|
|
28
|
-
function
|
|
29
|
-
const t =
|
|
30
|
-
if (t === void 0) return
|
|
31
|
-
const o =
|
|
32
|
-
return
|
|
28
|
+
function O(e) {
|
|
29
|
+
const t = F(e);
|
|
30
|
+
if (t === void 0) return d;
|
|
31
|
+
const o = L(E, t);
|
|
32
|
+
return L(t, I) >= o ? T : d;
|
|
33
33
|
}
|
|
34
34
|
const k = new Intl.NumberFormat(void 0, {
|
|
35
35
|
style: "percent",
|
|
36
36
|
maximumFractionDigits: 1
|
|
37
37
|
});
|
|
38
38
|
function B(e) {
|
|
39
|
-
return k.format(e /
|
|
39
|
+
return k.format(e / s);
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function D(e) {
|
|
42
42
|
return e.stacking === "percent" ? B : e.valueFormatter;
|
|
43
43
|
}
|
|
44
|
-
function
|
|
45
|
-
const t =
|
|
44
|
+
function c(e) {
|
|
45
|
+
const t = D(e);
|
|
46
46
|
if (t)
|
|
47
47
|
return (o) => o === null ? "" : t(o);
|
|
48
48
|
}
|
|
49
|
-
function
|
|
49
|
+
function M(e, t) {
|
|
50
50
|
const o = new Map(
|
|
51
|
-
e.points.map((
|
|
51
|
+
e.points.map((r) => [r.category, r.value])
|
|
52
52
|
);
|
|
53
|
-
return t.map((
|
|
53
|
+
return t.map((r) => o.get(r) ?? null);
|
|
54
54
|
}
|
|
55
|
-
function
|
|
55
|
+
function P(e, t) {
|
|
56
56
|
const o = Array.from(
|
|
57
57
|
{ length: t },
|
|
58
|
-
(
|
|
59
|
-
(
|
|
58
|
+
(r, a) => e.reduce(
|
|
59
|
+
(n, i) => n + (i[a] ?? 0),
|
|
60
60
|
0
|
|
61
61
|
)
|
|
62
62
|
);
|
|
63
63
|
return e.map(
|
|
64
|
-
(
|
|
65
|
-
const
|
|
66
|
-
return
|
|
64
|
+
(r) => r.map((a, n) => {
|
|
65
|
+
const i = o[n];
|
|
66
|
+
return a === null || i === 0 ? null : a / i * s;
|
|
67
67
|
})
|
|
68
68
|
);
|
|
69
69
|
}
|
|
70
|
-
function
|
|
70
|
+
function b(e) {
|
|
71
71
|
return e.stacking !== "off" ? "inside" : e.orientation === "horizontal" ? "right" : "top";
|
|
72
72
|
}
|
|
73
|
-
function
|
|
73
|
+
function R(e) {
|
|
74
74
|
return e.labelRect.width <= e.rect.width && e.labelRect.height <= e.rect.height;
|
|
75
75
|
}
|
|
76
|
-
function
|
|
76
|
+
function S(e) {
|
|
77
77
|
const t = e.valueLabel === "auto";
|
|
78
|
-
return !t ||
|
|
78
|
+
return !t || b(e) !== "inside" ? { hideOverlap: t } : (o) => ({
|
|
79
79
|
hideOverlap: t,
|
|
80
|
-
fontSize:
|
|
80
|
+
fontSize: R(o) ? void 0 : 0
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
|
-
function
|
|
84
|
-
const o =
|
|
83
|
+
function V(e, t) {
|
|
84
|
+
const o = b(e), r = c(e);
|
|
85
85
|
return {
|
|
86
86
|
show: e.valueLabel !== "never",
|
|
87
87
|
position: o,
|
|
88
|
-
color: o === "inside" ?
|
|
89
|
-
formatter:
|
|
88
|
+
color: o === "inside" ? O(t) : e.theme.labelColor,
|
|
89
|
+
formatter: r ? (a) => r(a.value) : void 0
|
|
90
90
|
};
|
|
91
91
|
}
|
|
92
92
|
function z(e) {
|
|
93
|
-
const { categories: t, theme: o, orientation:
|
|
93
|
+
const { categories: t, theme: o, orientation: r } = e;
|
|
94
94
|
return {
|
|
95
95
|
type: "category",
|
|
96
96
|
data: t,
|
|
97
97
|
// Na horizontal o ECharts empilha a categoria de baixo para cima, invertendo a ordem que o
|
|
98
98
|
// app escolheu ao ordenar as barras.
|
|
99
|
-
inverse:
|
|
99
|
+
inverse: r === "horizontal",
|
|
100
100
|
axisLine: { lineStyle: { color: o.axisLineColor } },
|
|
101
101
|
axisTick: { show: !1 },
|
|
102
102
|
axisLabel: {
|
|
103
103
|
color: o.labelColor,
|
|
104
104
|
hideOverlap: !0,
|
|
105
|
-
width:
|
|
105
|
+
width: y[r],
|
|
106
106
|
overflow: "truncate"
|
|
107
107
|
},
|
|
108
108
|
splitLine: { show: !1 }
|
|
109
109
|
};
|
|
110
110
|
}
|
|
111
|
-
function
|
|
112
|
-
const { valueAxis: t, stacking: o, theme:
|
|
111
|
+
function H(e) {
|
|
112
|
+
const { valueAxis: t, stacking: o, theme: r } = e, a = o === "percent", n = c(e);
|
|
113
113
|
return {
|
|
114
114
|
type: t.scale === "log" ? "log" : "value",
|
|
115
115
|
// Barra mede por comprimento: eixo cortado mente sobre a proporção entre as barras, então
|
|
116
116
|
// aqui o zero entra por padrão — ao contrário da série temporal, que só mostra variação.
|
|
117
|
-
scale: !
|
|
118
|
-
min:
|
|
119
|
-
max:
|
|
117
|
+
scale: !a && t.includeZero === !1,
|
|
118
|
+
min: a ? 0 : t.min,
|
|
119
|
+
max: a ? s : t.max,
|
|
120
120
|
axisLine: { show: !1 },
|
|
121
|
-
axisLabel: { color:
|
|
122
|
-
splitLine: { lineStyle: { color:
|
|
121
|
+
axisLabel: { color: r.labelColor, formatter: n },
|
|
122
|
+
splitLine: { lineStyle: { color: r.splitLineColor } }
|
|
123
123
|
};
|
|
124
124
|
}
|
|
125
|
-
function
|
|
126
|
-
const { categories: t, series: o, orientation:
|
|
127
|
-
(
|
|
128
|
-
),
|
|
125
|
+
function G(e) {
|
|
126
|
+
const { categories: t, series: o, orientation: r, stacking: a, theme: n } = e, i = r === "horizontal", C = c(e), u = o.map(
|
|
127
|
+
(l) => M(l, t)
|
|
128
|
+
), x = a === "percent" ? P(u, t.length) : u, v = S(e), f = z(e), m = H(e);
|
|
129
129
|
return {
|
|
130
130
|
animation: !1,
|
|
131
|
-
color:
|
|
132
|
-
textStyle: { fontFamily:
|
|
131
|
+
color: n.seriesColors,
|
|
132
|
+
textStyle: { fontFamily: n.fontFamily, color: n.labelColor },
|
|
133
133
|
grid: {
|
|
134
|
-
...
|
|
135
|
-
top: f ? s.top + 32 : s.top,
|
|
134
|
+
...p,
|
|
136
135
|
containLabel: !0
|
|
137
136
|
},
|
|
138
|
-
legend: f ? {
|
|
139
|
-
type: "scroll",
|
|
140
|
-
top: 0,
|
|
141
|
-
left: 0,
|
|
142
|
-
icon: "roundRect",
|
|
143
|
-
itemHeight: 8,
|
|
144
|
-
itemWidth: 12,
|
|
145
|
-
textStyle: { color: l.labelColor }
|
|
146
|
-
} : { show: !1 },
|
|
147
137
|
tooltip: {
|
|
148
138
|
trigger: "axis",
|
|
149
139
|
axisPointer: { type: "shadow" },
|
|
150
|
-
backgroundColor:
|
|
151
|
-
borderColor:
|
|
152
|
-
textStyle: { color:
|
|
153
|
-
valueFormatter:
|
|
140
|
+
backgroundColor: n.tooltipBackgroundColor,
|
|
141
|
+
borderColor: n.tooltipBorderColor,
|
|
142
|
+
textStyle: { color: n.labelColor },
|
|
143
|
+
valueFormatter: C
|
|
154
144
|
},
|
|
155
|
-
xAxis:
|
|
156
|
-
yAxis:
|
|
157
|
-
series: o.map((
|
|
158
|
-
const
|
|
145
|
+
xAxis: i ? m : f,
|
|
146
|
+
yAxis: i ? f : m,
|
|
147
|
+
series: o.map((l, g) => {
|
|
148
|
+
const h = e.seriesColorOverrides[l.id] ?? n.seriesColors[g % n.seriesColors.length];
|
|
159
149
|
return {
|
|
160
|
-
id:
|
|
161
|
-
name:
|
|
150
|
+
id: l.id,
|
|
151
|
+
name: l.name,
|
|
162
152
|
type: "bar",
|
|
163
|
-
stack:
|
|
164
|
-
barMaxWidth:
|
|
165
|
-
data:
|
|
166
|
-
itemStyle: { color:
|
|
167
|
-
label:
|
|
153
|
+
stack: a === "off" ? void 0 : _,
|
|
154
|
+
barMaxWidth: A,
|
|
155
|
+
data: x[g],
|
|
156
|
+
itemStyle: { color: h },
|
|
157
|
+
label: V(e, h),
|
|
168
158
|
labelLayout: v
|
|
169
159
|
};
|
|
170
160
|
})
|
|
171
161
|
};
|
|
172
162
|
}
|
|
173
163
|
export {
|
|
174
|
-
|
|
164
|
+
G as buildBarChartOption
|
|
175
165
|
};
|
|
176
166
|
//# sourceMappingURL=bar-chart-option.js.map
|