@apipass/design-system 5.1.0 → 5.3.0

package/dist/lib/ui/components/charts/ChartLegend/use-chart-legend.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=require("../chart-palette.cjs");function T(t,r,u){const[s,S]=c.useState(()=>new Set),l=c.useCallback(e=>{S(n=>{const o=new Set(n);return o.has(e)?o.delete(e):o.add(e),o})},[]),h=c.useMemo(()=>{const e={};return t.forEach((n,o)=>{e[n.id]=n.colorToken??d.CHART_SERIES_COLOR_TOKENS[o%d.CHART_SERIES_COLOR_TOKENS.length]}),e},[t]),i=c.useMemo(()=>{const e={};return t.forEach((n,o)=>{const m=n.colorToken?u(n.colorToken):void 0;e[n.id]=m??r[o%r.length]}),e},[t,r,u]);return{items:c.useMemo(()=>t.map(e=>({id:e.id,name:e.name,color:i[e.id],isHidden:s.has(e.id)})),[t,i,s]),colorsBySeriesId:i,colorTokensBySeriesId:h,hiddenSeriesIds:s,toggleSeries:l}}exports.useChartLegend=T;
+//# sourceMappingURL=use-chart-legend.cjs.map

package/dist/lib/ui/components/charts/ChartLegend/use-chart-legend.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-legend.cjs","sources":["../../../../../../src/ui/components/charts/ChartLegend/use-chart-legend.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport { CHART_SERIES_COLOR_TOKENS } from \"../chart-palette\";\nimport type { ChartLegendItem } from \"./ChartLegend\";\n\nexport interface ChartLegendSeries {\n  id: string;\n  name: string;\n  colorToken?: string;\n}\n\nexport interface ChartLegendState {\n  items: ChartLegendItem[];\n  // Por id, e já resolvida: é o que o canvas recebe. Fica com todas as séries, e não só com as\n  // visíveis, porque a cor de quem não escolheu token sai da posição — recalculá-la sobre a lista\n  // filtrada faria esconder uma série repintar todas as que vêm depois dela.\n  colorsBySeriesId: Record<string, string>;\n  // O token por trás da cor: a escolhida, ou a que a paleta dá àquela posição. É o que o seletor\n  // de cor recebe, porque token é o que se persiste.\n  colorTokensBySeriesId: Record<string, string>;\n  hiddenSeriesIds: Set<string>;\n  toggleSeries: (seriesId: string) => void;\n}\n\nexport function useChartLegend(\n  series: ChartLegendSeries[],\n  paletteColors: string[],\n  resolveSeriesColor: (token: string) => string | undefined,\n): ChartLegendState {\n  const [hiddenSeriesIds, setHiddenSeriesIds] = useState<Set<string>>(() => new Set<string>());\n\n  const toggleSeries = useCallback((seriesId: string): void => {\n    setHiddenSeriesIds((current: Set<string>) => {\n      const next: Set<string> = new Set(current);\n      if (next.has(seriesId)) next.delete(seriesId);\n      else next.add(seriesId);\n      return next;\n    });\n  }, []);\n\n  const colorTokensBySeriesId: Record<string, string> = useMemo(() => {\n    const tokens: Record<string, string> = {};\n    series.forEach((data: ChartLegendSeries, index: number) => {\n      tokens[data.id] =\n        data.colorToken ?? CHART_SERIES_COLOR_TOKENS[index % CHART_SERIES_COLOR_TOKENS.length];\n    });\n    return tokens;\n  }, [series]);\n\n  const colorsBySeriesId: Record<string, string> = useMemo(() => {\n    const colors: Record<string, string> = {};\n    series.forEach((data: ChartLegendSeries, index: number) => {\n      const chosen: string | undefined = data.colorToken\n        ? resolveSeriesColor(data.colorToken)\n        : undefined;\n      colors[data.id] = chosen ?? paletteColors[index % paletteColors.length];\n    });\n    return colors;\n  }, [series, paletteColors, resolveSeriesColor]);\n\n  // A legenda mostra a mesma cor resolvida que o canvas desenha, e não o token: é o que o seletor\n  // de cor compara para marcar a amostra escolhida, e o que impede as duas metades da tela de\n  // discordarem sobre a cor de uma série.\n  const items: ChartLegendItem[] = useMemo(\n    () =>\n      series.map((data: ChartLegendSeries) => ({\n        id: data.id,\n        name: data.name,\n        color: colorsBySeriesId[data.id],\n        isHidden: hiddenSeriesIds.has(data.id),\n      })),\n    [series, colorsBySeriesId, hiddenSeriesIds],\n  );\n\n  return { items, colorsBySeriesId, colorTokensBySeriesId, hiddenSeriesIds, toggleSeries };\n}\n"],"names":["useChartLegend","series","paletteColors","resolveSeriesColor","hiddenSeriesIds","setHiddenSeriesIds","useState","toggleSeries","useCallback","seriesId","current","next","colorTokensBySeriesId","useMemo","tokens","data","index","CHART_SERIES_COLOR_TOKENS","colorsBySeriesId","colors","chosen"],"mappings":"2IAuBO,SAASA,EACdC,EACAC,EACAC,EACkB,CAClB,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAAAA,SAAsB,IAAM,IAAI,GAAa,EAErFC,EAAeC,cAAaC,GAA2B,CAC3DJ,EAAoBK,GAAyB,CAC3C,MAAMC,EAAoB,IAAI,IAAID,CAAO,EACzC,OAAIC,EAAK,IAAIF,CAAQ,EAAGE,EAAK,OAAOF,CAAQ,EACvCE,EAAK,IAAIF,CAAQ,EACfE,CACT,CAAC,CACH,EAAG,CAAA,CAAE,EAECC,EAAgDC,EAAAA,QAAQ,IAAM,CAClE,MAAMC,EAAiC,CAAA,EACvC,OAAAb,EAAO,QAAQ,CAACc,EAAyBC,IAAkB,CACzDF,EAAOC,EAAK,EAAE,EACZA,EAAK,YAAcE,4BAA0BD,EAAQC,EAAAA,0BAA0B,MAAM,CACzF,CAAC,EACMH,CACT,EAAG,CAACb,CAAM,CAAC,EAELiB,EAA2CL,EAAAA,QAAQ,IAAM,CAC7D,MAAMM,EAAiC,CAAA,EACvC,OAAAlB,EAAO,QAAQ,CAACc,EAAyBC,IAAkB,CACzD,MAAMI,EAA6BL,EAAK,WACpCZ,EAAmBY,EAAK,UAAU,EAClC,OACJI,EAAOJ,EAAK,EAAE,EAAIK,GAAUlB,EAAcc,EAAQd,EAAc,MAAM,CACxE,CAAC,EACMiB,CACT,EAAG,CAAClB,EAAQC,EAAeC,CAAkB,CAAC,EAgB9C,MAAO,CAAE,MAXwBU,EAAAA,QAC/B,IACEZ,EAAO,IAAKc,IAA6B,CACvC,GAAIA,EAAK,GACT,KAAMA,EAAK,KACX,MAAOG,EAAiBH,EAAK,EAAE,EAC/B,SAAUX,EAAgB,IAAIW,EAAK,EAAE,CAAA,EACrC,EACJ,CAACd,EAAQiB,EAAkBd,CAAe,CAAA,EAG5B,iBAAAc,EAAkB,sBAAAN,EAAuB,gBAAAR,EAAiB,aAAAG,CAAA,CAC5E"}

package/dist/lib/ui/components/charts/ChartLegend/use-chart-legend.js

@@ -0,0 +1,34 @@
+import { useState as f, useCallback as k, useMemo as s } from "react";
+import { CHART_SERIES_COLOR_TOKENS as m } from "../chart-palette.js";
+function H(c, t, d) {
+  const [r, S] = f(() => /* @__PURE__ */ new Set()), h = k((o) => {
+    S((n) => {
+      const e = new Set(n);
+      return e.has(o) ? e.delete(o) : e.add(o), e;
+    });
+  }, []), u = s(() => {
+    const o = {};
+    return c.forEach((n, e) => {
+      o[n.id] = n.colorToken ?? m[e % m.length];
+    }), o;
+  }, [c]), i = s(() => {
+    const o = {};
+    return c.forEach((n, e) => {
+      const l = n.colorToken ? d(n.colorToken) : void 0;
+      o[n.id] = l ?? t[e % t.length];
+    }), o;
+  }, [c, t, d]);
+  return { items: s(
+    () => c.map((o) => ({
+      id: o.id,
+      name: o.name,
+      color: i[o.id],
+      isHidden: r.has(o.id)
+    })),
+    [c, i, r]
+  ), colorsBySeriesId: i, colorTokensBySeriesId: u, hiddenSeriesIds: r, toggleSeries: h };
+}
+export {
+  H as useChartLegend
+};
+//# sourceMappingURL=use-chart-legend.js.map

package/dist/lib/ui/components/charts/ChartLegend/use-chart-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-legend.js","sources":["../../../../../../src/ui/components/charts/ChartLegend/use-chart-legend.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport { CHART_SERIES_COLOR_TOKENS } from \"../chart-palette\";\nimport type { ChartLegendItem } from \"./ChartLegend\";\n\nexport interface ChartLegendSeries {\n  id: string;\n  name: string;\n  colorToken?: string;\n}\n\nexport interface ChartLegendState {\n  items: ChartLegendItem[];\n  // Por id, e já resolvida: é o que o canvas recebe. Fica com todas as séries, e não só com as\n  // visíveis, porque a cor de quem não escolheu token sai da posição — recalculá-la sobre a lista\n  // filtrada faria esconder uma série repintar todas as que vêm depois dela.\n  colorsBySeriesId: Record<string, string>;\n  // O token por trás da cor: a escolhida, ou a que a paleta dá àquela posição. É o que o seletor\n  // de cor recebe, porque token é o que se persiste.\n  colorTokensBySeriesId: Record<string, string>;\n  hiddenSeriesIds: Set<string>;\n  toggleSeries: (seriesId: string) => void;\n}\n\nexport function useChartLegend(\n  series: ChartLegendSeries[],\n  paletteColors: string[],\n  resolveSeriesColor: (token: string) => string | undefined,\n): ChartLegendState {\n  const [hiddenSeriesIds, setHiddenSeriesIds] = useState<Set<string>>(() => new Set<string>());\n\n  const toggleSeries = useCallback((seriesId: string): void => {\n    setHiddenSeriesIds((current: Set<string>) => {\n      const next: Set<string> = new Set(current);\n      if (next.has(seriesId)) next.delete(seriesId);\n      else next.add(seriesId);\n      return next;\n    });\n  }, []);\n\n  const colorTokensBySeriesId: Record<string, string> = useMemo(() => {\n    const tokens: Record<string, string> = {};\n    series.forEach((data: ChartLegendSeries, index: number) => {\n      tokens[data.id] =\n        data.colorToken ?? CHART_SERIES_COLOR_TOKENS[index % CHART_SERIES_COLOR_TOKENS.length];\n    });\n    return tokens;\n  }, [series]);\n\n  const colorsBySeriesId: Record<string, string> = useMemo(() => {\n    const colors: Record<string, string> = {};\n    series.forEach((data: ChartLegendSeries, index: number) => {\n      const chosen: string | undefined = data.colorToken\n        ? resolveSeriesColor(data.colorToken)\n        : undefined;\n      colors[data.id] = chosen ?? paletteColors[index % paletteColors.length];\n    });\n    return colors;\n  }, [series, paletteColors, resolveSeriesColor]);\n\n  // A legenda mostra a mesma cor resolvida que o canvas desenha, e não o token: é o que o seletor\n  // de cor compara para marcar a amostra escolhida, e o que impede as duas metades da tela de\n  // discordarem sobre a cor de uma série.\n  const items: ChartLegendItem[] = useMemo(\n    () =>\n      series.map((data: ChartLegendSeries) => ({\n        id: data.id,\n        name: data.name,\n        color: colorsBySeriesId[data.id],\n        isHidden: hiddenSeriesIds.has(data.id),\n      })),\n    [series, colorsBySeriesId, hiddenSeriesIds],\n  );\n\n  return { items, colorsBySeriesId, colorTokensBySeriesId, hiddenSeriesIds, toggleSeries };\n}\n"],"names":["useChartLegend","series","paletteColors","resolveSeriesColor","hiddenSeriesIds","setHiddenSeriesIds","useState","toggleSeries","useCallback","seriesId","current","next","colorTokensBySeriesId","useMemo","tokens","data","index","CHART_SERIES_COLOR_TOKENS","colorsBySeriesId","colors","chosen"],"mappings":";;AAuBO,SAASA,EACdC,GACAC,GACAC,GACkB;AAClB,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAsB,MAAM,oBAAI,KAAa,GAErFC,IAAeC,EAAY,CAACC,MAA2B;AAC3D,IAAAJ,EAAmB,CAACK,MAAyB;AAC3C,YAAMC,IAAoB,IAAI,IAAID,CAAO;AACzC,aAAIC,EAAK,IAAIF,CAAQ,IAAGE,EAAK,OAAOF,CAAQ,IACvCE,EAAK,IAAIF,CAAQ,GACfE;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAA,CAAE,GAECC,IAAgDC,EAAQ,MAAM;AAClE,UAAMC,IAAiC,CAAA;AACvC,WAAAb,EAAO,QAAQ,CAACc,GAAyBC,MAAkB;AACzD,MAAAF,EAAOC,EAAK,EAAE,IACZA,EAAK,cAAcE,EAA0BD,IAAQC,EAA0B,MAAM;AAAA,IACzF,CAAC,GACMH;AAAA,EACT,GAAG,CAACb,CAAM,CAAC,GAELiB,IAA2CL,EAAQ,MAAM;AAC7D,UAAMM,IAAiC,CAAA;AACvC,WAAAlB,EAAO,QAAQ,CAACc,GAAyBC,MAAkB;AACzD,YAAMI,IAA6BL,EAAK,aACpCZ,EAAmBY,EAAK,UAAU,IAClC;AACJ,MAAAI,EAAOJ,EAAK,EAAE,IAAIK,KAAUlB,EAAcc,IAAQd,EAAc,MAAM;AAAA,IACxE,CAAC,GACMiB;AAAA,EACT,GAAG,CAAClB,GAAQC,GAAeC,CAAkB,CAAC;AAgB9C,SAAO,EAAE,OAXwBU;AAAA,IAC/B,MACEZ,EAAO,IAAI,CAACc,OAA6B;AAAA,MACvC,IAAIA,EAAK;AAAA,MACT,MAAMA,EAAK;AAAA,MACX,OAAOG,EAAiBH,EAAK,EAAE;AAAA,MAC/B,UAAUX,EAAgB,IAAIW,EAAK,EAAE;AAAA,IAAA,EACrC;AAAA,IACJ,CAACd,GAAQiB,GAAkBd,CAAe;AAAA,EAAA,GAG5B,kBAAAc,GAAkB,uBAAAN,GAAuB,iBAAAR,GAAiB,cAAAG,EAAA;AAC5E;"}

package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react/jsx-runtime"),I=require("../../../../vendor/clsx/dist/clsx.cjs"),d=require("react"),h=require("../useChartInstance.cjs"),P=require("./time-series-option.cjs");;/* empty css                        */const _={},E={};function M({series:e,displayType:n="line",legend:o="inline",line:c=E,yAxis:s=_,showSymbols:u=!1,showValueLabels:a=!1,valueFormatter:f,className:T,...m}){const{containerRef:q,chart:r,theme:t,resolveSeriesColor:l}=h.useChartInstance();return d.useEffect(()=>{if(!r||!t)return;const O={};for(const i of e){if(!i.colorToken)continue;const S=l(i.colorToken);S&&(O[i.id]=S)}r.setOption(P.buildTimeSeriesOption({series:e,displayType:n,legend:o,line:c,yAxis:s,theme:t,showSymbols:u,showValueLabels:a,seriesColorOverrides:O,valueFormatter:f}),{notMerge:!0})},[r,t,l,e,n,o,c,s,u,a,f]),C.jsx("div",{ref:q,className:I.clsx("time-series-chart",T),...m})}exports.TimeSeriesChart=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),L=require("../../../../vendor/clsx/dist/clsx.cjs"),S=require("react"),M=require("../useChartInstance.cjs"),N=require("../ChartLegend/ChartLegend.cjs"),P=require("../ChartLegend/use-chart-legend.cjs"),b=require("./time-series-option.cjs");;/* empty css                        */const E={},R={};function Y({series:r,displayType:t="line",legend:h="inline",line:n=R,yAxis:o=E,showSymbols:c=!1,showValueLabels:a=!1,valueFormatter:l,onSeriesColorChange:C,legendLabels:f,className:m,...I}){const{containerRef:O,chart:s,theme:e,resolveSeriesColor:T}=M.useChartInstance(),{items:q,colorsBySeriesId:u,colorTokensBySeriesId:_,hiddenSeriesIds:d,toggleSeries:v}=P.useChartLegend(r,(e==null?void 0:e.seriesColors)??[],T),g=S.useMemo(()=>r.filter(x=>!d.has(x.id)),[r,d]);S.useEffect(()=>{!s||!e||s.setOption(b.buildTimeSeriesOption({series:g,displayType:t,line:n,yAxis:o,theme:e,showSymbols:c,showValueLabels:a,seriesColorOverrides:u,valueFormatter:l}),{notMerge:!0})},[s,e,g,t,n,o,c,a,u,l]);const j=h!=="none"&&r.length>0;return i.jsxs("div",{className:L.clsx("time-series-chart",m),...I,children:[j&&i.jsx(N.ChartLegend,{items:q,onToggle:v,onColorChange:C,colorTokensBySeriesId:_,labels:f}),i.jsx("div",{ref:O,className:"time-series-chart__canvas"})]})}exports.TimeSeriesChart=Y;
 //# sourceMappingURL=TimeSeriesChart.cjs.map

package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChart.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/TimeSeriesChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect } from \"react\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTimeSeriesOption,\n  type TimeSeriesData,\n  type TimeSeriesDisplayType,\n  type TimeSeriesLegendMode,\n  type TimeSeriesLineOptions,\n  type TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\nimport \"./time-series-chart.css\";\n\nexport type {\n  TimeSeriesData,\n  TimeSeriesDisplayType,\n  TimeSeriesLegendMode,\n  TimeSeriesLineOptions,\n  TimeSeriesLineStyle,\n  TimeSeriesLineWidth,\n  TimeSeriesPoint,\n  TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\n\nexport type TimeSeriesChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  series: TimeSeriesData[];\n  displayType?: TimeSeriesDisplayType;\n  legend?: TimeSeriesLegendMode;\n  line?: TimeSeriesLineOptions;\n  yAxis?: TimeSeriesYAxisOptions;\n  showSymbols?: boolean;\n  showValueLabels?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\nconst EMPTY_Y_AXIS_OPTIONS: TimeSeriesYAxisOptions = {};\n\nconst EMPTY_LINE_OPTIONS: TimeSeriesLineOptions = {};\n\nexport function TimeSeriesChart({\n  series,\n  displayType = \"line\",\n  legend = \"inline\",\n  line = EMPTY_LINE_OPTIONS,\n  yAxis = EMPTY_Y_AXIS_OPTIONS,\n  showSymbols = false,\n  showValueLabels = false,\n  valueFormatter,\n  className,\n  ...props\n}: TimeSeriesChartProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n\n  useEffect(() => {\n    if (!chart || !theme) return;\n\n    const seriesColorOverrides: Record<string, string> = {};\n    for (const data of series) {\n      if (!data.colorToken) continue;\n      const color: string | undefined = resolveSeriesColor(data.colorToken);\n      if (color) seriesColorOverrides[data.id] = color;\n    }\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      buildTimeSeriesOption({\n        series,\n        displayType,\n        legend,\n        line,\n        yAxis,\n        theme,\n        showSymbols,\n        showValueLabels,\n        seriesColorOverrides,\n        valueFormatter,\n      }),\n      { notMerge: true },\n    );\n  }, [\n    chart,\n    theme,\n    resolveSeriesColor,\n    series,\n    displayType,\n    legend,\n    line,\n    yAxis,\n    showSymbols,\n    showValueLabels,\n    valueFormatter,\n  ]);\n\n  return <div ref={containerRef} className={clsx(\"time-series-chart\", className)} {...props} />;\n}\n"],"names":["EMPTY_Y_AXIS_OPTIONS","EMPTY_LINE_OPTIONS","TimeSeriesChart","series","displayType","legend","line","yAxis","showSymbols","showValueLabels","valueFormatter","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","useEffect","seriesColorOverrides","data","color","buildTimeSeriesOption","jsx","clsx"],"mappings":"6SAmCA,MAAMA,EAA+C,CAAA,EAE/CC,EAA4C,CAAA,EAE3C,SAASC,EAAgB,CAC9B,OAAAC,EACA,YAAAC,EAAc,OACd,OAAAC,EAAS,SACT,KAAAC,EAAOL,EACP,MAAAM,EAAQP,EACR,YAAAQ,EAAc,GACd,gBAAAC,EAAkB,GAClB,eAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAyB,CACvB,KAAM,CAAE,aAAAC,EAAc,MAAAC,EAAO,MAAAC,EAAO,mBAAAC,CAAA,EAAsCC,EAAAA,iBAAA,EAE1EC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACJ,GAAS,CAACC,EAAO,OAEtB,MAAMI,EAA+C,CAAA,EACrD,UAAWC,KAAQjB,EAAQ,CACzB,GAAI,CAACiB,EAAK,WAAY,SACtB,MAAMC,EAA4BL,EAAmBI,EAAK,UAAU,EAChEC,IAAOF,EAAqBC,EAAK,EAAE,EAAIC,EAC7C,CAIAP,EAAM,UACJQ,wBAAsB,CACpB,OAAAnB,EACA,YAAAC,EACA,OAAAC,EACA,KAAAC,EACA,MAAAC,EACA,MAAAQ,EACA,YAAAP,EACA,gBAAAC,EACA,qBAAAU,EACA,eAAAT,CAAA,CACD,EACD,CAAE,SAAU,EAAA,CAAK,CAErB,EAAG,CACDI,EACAC,EACAC,EACAb,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,CAAA,CACD,EAEMa,MAAC,MAAA,CAAI,IAAKV,EAAc,UAAWW,EAAAA,KAAK,oBAAqBb,CAAS,EAAI,GAAGC,CAAA,CAAO,CAC7F"}
+{"version":3,"file":"TimeSeriesChart.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/TimeSeriesChart.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  buildTimeSeriesOption,\n  type TimeSeriesData,\n  type TimeSeriesDisplayType,\n  type TimeSeriesLegendMode,\n  type TimeSeriesLineOptions,\n  type TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\nimport \"./time-series-chart.css\";\n\nexport type {\n  TimeSeriesData,\n  TimeSeriesDisplayType,\n  TimeSeriesLegendMode,\n  TimeSeriesLineOptions,\n  TimeSeriesLineStyle,\n  TimeSeriesLineWidth,\n  TimeSeriesPoint,\n  TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\n\nexport type TimeSeriesChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  series: TimeSeriesData[];\n  displayType?: TimeSeriesDisplayType;\n  legend?: TimeSeriesLegendMode;\n  line?: TimeSeriesLineOptions;\n  yAxis?: TimeSeriesYAxisOptions;\n  showSymbols?: boolean;\n  showValueLabels?: boolean;\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_Y_AXIS_OPTIONS: TimeSeriesYAxisOptions = {};\n\nconst EMPTY_LINE_OPTIONS: TimeSeriesLineOptions = {};\n\nexport function TimeSeriesChart({\n  series,\n  displayType = \"line\",\n  legend = \"inline\",\n  line = EMPTY_LINE_OPTIONS,\n  yAxis = EMPTY_Y_AXIS_OPTIONS,\n  showSymbols = false,\n  showValueLabels = false,\n  valueFormatter,\n  onSeriesColorChange,\n  legendLabels,\n  className,\n  ...props\n}: TimeSeriesChartProps) {\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.\n  const visibleSeries: TimeSeriesData[] = useMemo(\n    () => series.filter((data: TimeSeriesData) => !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      buildTimeSeriesOption({\n        series: visibleSeries,\n        displayType,\n        line,\n        yAxis,\n        theme,\n        showSymbols,\n        showValueLabels,\n        seriesColorOverrides: colorsBySeriesId,\n        valueFormatter,\n      }),\n      { notMerge: true },\n    );\n  }, [\n    chart,\n    theme,\n    visibleSeries,\n    displayType,\n    line,\n    yAxis,\n    showSymbols,\n    showValueLabels,\n    colorsBySeriesId,\n    valueFormatter,\n  ]);\n\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n\n  return (\n    <div className={clsx(\"time-series-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=\"time-series-chart__canvas\" />\n    </div>\n  );\n}\n"],"names":["EMPTY_Y_AXIS_OPTIONS","EMPTY_LINE_OPTIONS","TimeSeriesChart","series","displayType","legend","line","yAxis","showSymbols","showValueLabels","valueFormatter","onSeriesColorChange","legendLabels","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","items","colorsBySeriesId","colorTokensBySeriesId","hiddenSeriesIds","toggleSeries","useChartLegend","visibleSeries","useMemo","data","useEffect","buildTimeSeriesOption","isLegendVisible","jsxs","clsx","jsx","ChartLegend"],"mappings":"0YAyCA,MAAMA,EAA+C,CAAA,EAE/CC,EAA4C,CAAA,EAE3C,SAASC,EAAgB,CAC9B,OAAAC,EACA,YAAAC,EAAc,OACd,OAAAC,EAAS,SACT,KAAAC,EAAOL,EACP,MAAAM,EAAQP,EACR,YAAAQ,EAAc,GACd,gBAAAC,EAAkB,GAClB,eAAAC,EACA,oBAAAC,EACA,aAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAyB,CACvB,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,eAAetB,GAAQc,GAAA,YAAAA,EAAO,eAAgB,CAAA,EAAIC,CAAkB,EAIhEQ,EAAkCC,EAAAA,QACtC,IAAMxB,EAAO,OAAQyB,GAAyB,CAACL,EAAgB,IAAIK,EAAK,EAAE,CAAC,EAC3E,CAACzB,EAAQoB,CAAe,CAAA,EAG1BM,EAAAA,UAAU,IAAM,CACV,CAACb,GAAS,CAACC,GAIfD,EAAM,UACJc,wBAAsB,CACpB,OAAQJ,EACR,YAAAtB,EACA,KAAAE,EACA,MAAAC,EACA,MAAAU,EACA,YAAAT,EACA,gBAAAC,EACA,qBAAsBY,EACtB,eAAAX,CAAA,CACD,EACD,CAAE,SAAU,EAAA,CAAK,CAErB,EAAG,CACDM,EACAC,EACAS,EACAtB,EACAE,EACAC,EACAC,EACAC,EACAY,EACAX,CAAA,CACD,EAED,MAAMqB,EAA2B1B,IAAW,QAAUF,EAAO,OAAS,EAEtE,OACE6B,EAAAA,KAAC,OAAI,UAAWC,EAAAA,KAAK,oBAAqBpB,CAAS,EAAI,GAAGC,EACvD,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,2BAAA,CAA4B,CAAA,EAChE,CAEJ"}

package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.js

@@ -1,61 +1,79 @@
-import { jsx as S } from "react/jsx-runtime";
-import { clsx as _ } from "../../../../vendor/clsx/dist/clsx.js";
-import { useEffect as C } from "react";
-import { useChartInstance as E } from "../useChartInstance.js";
-import { buildTimeSeriesOption as N } from "./time-series-option.js";
+import { jsxs as E, jsx as d } from "react/jsx-runtime";
+import { clsx as M } from "../../../../vendor/clsx/dist/clsx.js";
+import { useMemo as P, useEffect as x } from "react";
+import { useChartInstance as L } from "../useChartInstance.js";
+import { ChartLegend as Y } from "../ChartLegend/ChartLegend.js";
+import { useChartLegend as b } from "../ChartLegend/use-chart-legend.js";
+import { buildTimeSeriesOption as j } from "./time-series-option.js";
 /* empty css                      */
-const P = {}, d = {};
-function j({
-  series: o,
+const B = {}, k = {};
+function J({
+  series: r,
   displayType: i = "line",
-  legend: n = "inline",
-  line: c = d,
-  yAxis: f = P,
-  showSymbols: s = !1,
-  showValueLabels: m = !1,
-  valueFormatter: a,
-  className: l,
-  ...u
+  legend: g = "inline",
+  line: s = k,
+  yAxis: t = B,
+  showSymbols: n = !1,
+  showValueLabels: c = !1,
+  valueFormatter: m,
+  onSeriesColorChange: S,
+  legendLabels: h,
+  className: p,
+  ...C
 }) {
-  const { containerRef: I, chart: r, theme: t, resolveSeriesColor: p } = E();
-  return C(() => {
-    if (!r || !t) return;
-    const O = {};
-    for (const e of o) {
-      if (!e.colorToken) continue;
-      const T = p(e.colorToken);
-      T && (O[e.id] = T);
-    }
-    r.setOption(
-      N({
-        series: o,
+  const { containerRef: I, chart: o, theme: e, resolveSeriesColor: u } = L(), {
+    items: O,
+    colorsBySeriesId: l,
+    colorTokensBySeriesId: T,
+    hiddenSeriesIds: f,
+    toggleSeries: _
+  } = b(r, (e == null ? void 0 : e.seriesColors) ?? [], u), a = P(
+    () => r.filter((N) => !f.has(N.id)),
+    [r, f]
+  );
+  x(() => {
+    !o || !e || o.setOption(
+      j({
+        series: a,
         displayType: i,
-        legend: n,
-        line: c,
-        yAxis: f,
-        theme: t,
-        showSymbols: s,
-        showValueLabels: m,
-        seriesColorOverrides: O,
-        valueFormatter: a
+        line: s,
+        yAxis: t,
+        theme: e,
+        showSymbols: n,
+        showValueLabels: c,
+        seriesColorOverrides: l,
+        valueFormatter: m
       }),
       { notMerge: !0 }
     );
   }, [
-    r,
-    t,
-    p,
     o,
+    e,
+    a,
     i,
+    s,
+    t,
     n,
     c,
-    f,
-    s,
-    m,
-    a
-  ]), /* @__PURE__ */ S("div", { ref: I, className: _("time-series-chart", l), ...u });
+    l,
+    m
+  ]);
+  const v = g !== "none" && r.length > 0;
+  return /* @__PURE__ */ E("div", { className: M("time-series-chart", p), ...C, children: [
+    v && /* @__PURE__ */ d(
+      Y,
+      {
+        items: O,
+        onToggle: _,
+        onColorChange: S,
+        colorTokensBySeriesId: T,
+        labels: h
+      }
+    ),
+    /* @__PURE__ */ d("div", { ref: I, className: "time-series-chart__canvas" })
+  ] });
 }
 export {
-  j as TimeSeriesChart
+  J as TimeSeriesChart
 };
 //# sourceMappingURL=TimeSeriesChart.js.map

package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChart.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/TimeSeriesChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect } from \"react\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTimeSeriesOption,\n  type TimeSeriesData,\n  type TimeSeriesDisplayType,\n  type TimeSeriesLegendMode,\n  type TimeSeriesLineOptions,\n  type TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\nimport \"./time-series-chart.css\";\n\nexport type {\n  TimeSeriesData,\n  TimeSeriesDisplayType,\n  TimeSeriesLegendMode,\n  TimeSeriesLineOptions,\n  TimeSeriesLineStyle,\n  TimeSeriesLineWidth,\n  TimeSeriesPoint,\n  TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\n\nexport type TimeSeriesChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  series: TimeSeriesData[];\n  displayType?: TimeSeriesDisplayType;\n  legend?: TimeSeriesLegendMode;\n  line?: TimeSeriesLineOptions;\n  yAxis?: TimeSeriesYAxisOptions;\n  showSymbols?: boolean;\n  showValueLabels?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\nconst EMPTY_Y_AXIS_OPTIONS: TimeSeriesYAxisOptions = {};\n\nconst EMPTY_LINE_OPTIONS: TimeSeriesLineOptions = {};\n\nexport function TimeSeriesChart({\n  series,\n  displayType = \"line\",\n  legend = \"inline\",\n  line = EMPTY_LINE_OPTIONS,\n  yAxis = EMPTY_Y_AXIS_OPTIONS,\n  showSymbols = false,\n  showValueLabels = false,\n  valueFormatter,\n  className,\n  ...props\n}: TimeSeriesChartProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n\n  useEffect(() => {\n    if (!chart || !theme) return;\n\n    const seriesColorOverrides: Record<string, string> = {};\n    for (const data of series) {\n      if (!data.colorToken) continue;\n      const color: string | undefined = resolveSeriesColor(data.colorToken);\n      if (color) seriesColorOverrides[data.id] = color;\n    }\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      buildTimeSeriesOption({\n        series,\n        displayType,\n        legend,\n        line,\n        yAxis,\n        theme,\n        showSymbols,\n        showValueLabels,\n        seriesColorOverrides,\n        valueFormatter,\n      }),\n      { notMerge: true },\n    );\n  }, [\n    chart,\n    theme,\n    resolveSeriesColor,\n    series,\n    displayType,\n    legend,\n    line,\n    yAxis,\n    showSymbols,\n    showValueLabels,\n    valueFormatter,\n  ]);\n\n  return <div ref={containerRef} className={clsx(\"time-series-chart\", className)} {...props} />;\n}\n"],"names":["EMPTY_Y_AXIS_OPTIONS","EMPTY_LINE_OPTIONS","TimeSeriesChart","series","displayType","legend","line","yAxis","showSymbols","showValueLabels","valueFormatter","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","useEffect","seriesColorOverrides","data","color","buildTimeSeriesOption","jsx","clsx"],"mappings":";;;;;;AAmCA,MAAMA,IAA+C,CAAA,GAE/CC,IAA4C,CAAA;AAE3C,SAASC,EAAgB;AAAA,EAC9B,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAOL;AAAA,EACP,OAAAM,IAAQP;AAAA,EACR,aAAAQ,IAAc;AAAA,EACd,iBAAAC,IAAkB;AAAA,EAClB,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,OAAAC,GAAO,oBAAAC,EAAA,IAAsCC,EAAA;AAE1E,SAAAC,EAAU,MAAM;AACd,QAAI,CAACJ,KAAS,CAACC,EAAO;AAEtB,UAAMI,IAA+C,CAAA;AACrD,eAAWC,KAAQjB,GAAQ;AACzB,UAAI,CAACiB,EAAK,WAAY;AACtB,YAAMC,IAA4BL,EAAmBI,EAAK,UAAU;AACpE,MAAIC,MAAOF,EAAqBC,EAAK,EAAE,IAAIC;AAAA,IAC7C;AAIA,IAAAP,EAAM;AAAA,MACJQ,EAAsB;AAAA,QACpB,QAAAnB;AAAA,QACA,aAAAC;AAAA,QACA,QAAAC;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,OAAAQ;AAAA,QACA,aAAAP;AAAA,QACA,iBAAAC;AAAA,QACA,sBAAAU;AAAA,QACA,gBAAAT;AAAA,MAAA,CACD;AAAA,MACD,EAAE,UAAU,GAAA;AAAA,IAAK;AAAA,EAErB,GAAG;AAAA,IACDI;AAAA,IACAC;AAAA,IACAC;AAAA,IACAb;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,CACD,GAEM,gBAAAa,EAAC,OAAA,EAAI,KAAKV,GAAc,WAAWW,EAAK,qBAAqBb,CAAS,GAAI,GAAGC,EAAA,CAAO;AAC7F;"}
+{"version":3,"file":"TimeSeriesChart.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/TimeSeriesChart.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  buildTimeSeriesOption,\n  type TimeSeriesData,\n  type TimeSeriesDisplayType,\n  type TimeSeriesLegendMode,\n  type TimeSeriesLineOptions,\n  type TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\nimport \"./time-series-chart.css\";\n\nexport type {\n  TimeSeriesData,\n  TimeSeriesDisplayType,\n  TimeSeriesLegendMode,\n  TimeSeriesLineOptions,\n  TimeSeriesLineStyle,\n  TimeSeriesLineWidth,\n  TimeSeriesPoint,\n  TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\n\nexport type TimeSeriesChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  series: TimeSeriesData[];\n  displayType?: TimeSeriesDisplayType;\n  legend?: TimeSeriesLegendMode;\n  line?: TimeSeriesLineOptions;\n  yAxis?: TimeSeriesYAxisOptions;\n  showSymbols?: boolean;\n  showValueLabels?: boolean;\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_Y_AXIS_OPTIONS: TimeSeriesYAxisOptions = {};\n\nconst EMPTY_LINE_OPTIONS: TimeSeriesLineOptions = {};\n\nexport function TimeSeriesChart({\n  series,\n  displayType = \"line\",\n  legend = \"inline\",\n  line = EMPTY_LINE_OPTIONS,\n  yAxis = EMPTY_Y_AXIS_OPTIONS,\n  showSymbols = false,\n  showValueLabels = false,\n  valueFormatter,\n  onSeriesColorChange,\n  legendLabels,\n  className,\n  ...props\n}: TimeSeriesChartProps) {\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.\n  const visibleSeries: TimeSeriesData[] = useMemo(\n    () => series.filter((data: TimeSeriesData) => !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      buildTimeSeriesOption({\n        series: visibleSeries,\n        displayType,\n        line,\n        yAxis,\n        theme,\n        showSymbols,\n        showValueLabels,\n        seriesColorOverrides: colorsBySeriesId,\n        valueFormatter,\n      }),\n      { notMerge: true },\n    );\n  }, [\n    chart,\n    theme,\n    visibleSeries,\n    displayType,\n    line,\n    yAxis,\n    showSymbols,\n    showValueLabels,\n    colorsBySeriesId,\n    valueFormatter,\n  ]);\n\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n\n  return (\n    <div className={clsx(\"time-series-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=\"time-series-chart__canvas\" />\n    </div>\n  );\n}\n"],"names":["EMPTY_Y_AXIS_OPTIONS","EMPTY_LINE_OPTIONS","TimeSeriesChart","series","displayType","legend","line","yAxis","showSymbols","showValueLabels","valueFormatter","onSeriesColorChange","legendLabels","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","items","colorsBySeriesId","colorTokensBySeriesId","hiddenSeriesIds","toggleSeries","useChartLegend","visibleSeries","useMemo","data","useEffect","buildTimeSeriesOption","isLegendVisible","jsxs","clsx","jsx","ChartLegend"],"mappings":";;;;;;;;AAyCA,MAAMA,IAA+C,CAAA,GAE/CC,IAA4C,CAAA;AAE3C,SAASC,EAAgB;AAAA,EAC9B,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAOL;AAAA,EACP,OAAAM,IAAQP;AAAA,EACR,aAAAQ,IAAc;AAAA,EACd,iBAAAC,IAAkB;AAAA,EAClB,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,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,EAAetB,IAAQc,KAAA,gBAAAA,EAAO,iBAAgB,CAAA,GAAIC,CAAkB,GAIhEQ,IAAkCC;AAAA,IACtC,MAAMxB,EAAO,OAAO,CAACyB,MAAyB,CAACL,EAAgB,IAAIK,EAAK,EAAE,CAAC;AAAA,IAC3E,CAACzB,GAAQoB,CAAe;AAAA,EAAA;AAG1B,EAAAM,EAAU,MAAM;AACd,IAAI,CAACb,KAAS,CAACC,KAIfD,EAAM;AAAA,MACJc,EAAsB;AAAA,QACpB,QAAQJ;AAAA,QACR,aAAAtB;AAAA,QACA,MAAAE;AAAA,QACA,OAAAC;AAAA,QACA,OAAAU;AAAA,QACA,aAAAT;AAAA,QACA,iBAAAC;AAAA,QACA,sBAAsBY;AAAA,QACtB,gBAAAX;AAAA,MAAA,CACD;AAAA,MACD,EAAE,UAAU,GAAA;AAAA,IAAK;AAAA,EAErB,GAAG;AAAA,IACDM;AAAA,IACAC;AAAA,IACAS;AAAA,IACAtB;AAAA,IACAE;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAY;AAAA,IACAX;AAAA,EAAA,CACD;AAED,QAAMqB,IAA2B1B,MAAW,UAAUF,EAAO,SAAS;AAEtE,SACE,gBAAA6B,EAAC,SAAI,WAAWC,EAAK,qBAAqBpB,CAAS,GAAI,GAAGC,GACvD,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,4BAAA,CAA4B;AAAA,EAAA,GAChE;AAEJ;"}

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=32,n={top:16,right:16,bottom:24,left:56},f=6,y=.15,L={thin:1,normal:2,thick:4},g="solid",b="normal",h=new Intl.DateTimeFormat(void 0,{year:"numeric"}),p=new Intl.DateTimeFormat(void 0,{day:"2-digit",month:"2-digit"}),S=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",hour12:!1}),E=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});function T(o){const e=new Date(o);return e.getSeconds()!==0||e.getMilliseconds()!==0?E.format(e):e.getHours()!==0||e.getMinutes()!==0?S.format(e):e.getMonth()===0&&e.getDate()===1?h.format(e):p.format(e)}function c(o){const{valueFormatter:e}=o;if(e)return i=>i===null?"":e(i)}function C(o){const{showValueLabels:e,theme:i}=o,l=c(o);return{show:e,position:"top",color:i.labelColor,formatter:l?t=>l(t.value[1]):void 0}}function x(o,e,i){const l=o.points.map(r=>[r.timestamp,r.value]),t=C(e);return e.displayType==="bar"?{id:o.id,name:o.name,type:"bar",data:l,itemStyle:{color:i},label:t}:{id:o.id,name:o.name,type:"line",data:l,showSymbol:e.showSymbols,symbolSize:f,lineStyle:{color:i,type:e.line.style??g,width:L[e.line.width??b]},itemStyle:{color:i},areaStyle:e.displayType==="area"?{color:i,opacity:y}:void 0,label:t}}function _(o){const{series:e,legend:i,yAxis:l,theme:t,seriesColorOverrides:r}=o,s=i!=="none"&&e.length>0,a=c(o);return{animation:!1,color:t.seriesColors,textStyle:{fontFamily:t.fontFamily,color:t.labelColor},grid:{...n,top:s?n.top+u:n.top,containLabel:!1},legend:s?{type:"scroll",top:0,left:0,icon:"roundRect",itemHeight:8,itemWidth:12,textStyle:{color:t.labelColor}}:{show:!1},tooltip:{trigger:"axis",backgroundColor:t.tooltipBackgroundColor,borderColor:t.tooltipBorderColor,textStyle:{color:t.labelColor},valueFormatter:a},xAxis:{type:"time",axisLine:{lineStyle:{color:t.axisLineColor}},axisTick:{show:!1},axisLabel:{color:t.labelColor,hideOverlap:!0,formatter:T},splitLine:{show:!1}},yAxis:{type:l.scale==="log"?"log":"value",scale:l.includeZero!==!0,min:l.min,max:l.max,axisLine:{show:!1},axisLabel:{color:t.labelColor,formatter:a},splitLine:{lineStyle:{color:t.splitLineColor}}},series:e.map((m,d)=>x(m,o,r[m.id]??t.seriesColors[d%t.seriesColors.length]))}}exports.buildTimeSeriesOption=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m={top:16,right:16,bottom:24,left:56},c=6,d=.15,u={thin:1,normal:2,thick:4},f="solid",y="normal",L=new Intl.DateTimeFormat(void 0,{year:"numeric"}),b=new Intl.DateTimeFormat(void 0,{day:"2-digit",month:"2-digit"}),g=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",hour12:!1}),h=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});function S(t){const e=new Date(t);return e.getSeconds()!==0||e.getMilliseconds()!==0?h.format(e):e.getHours()!==0||e.getMinutes()!==0?g.format(e):e.getMonth()===0&&e.getDate()===1?L.format(e):b.format(e)}function n(t){const{valueFormatter:e}=t;if(e)return i=>i===null?"":e(i)}function p(t){const{showValueLabels:e,theme:i}=t,o=n(t);return{show:e,position:"top",color:i.labelColor,formatter:o?l=>o(l.value[1]):void 0}}function C(t,e,i){const o=t.points.map(r=>[r.timestamp,r.value]),l=p(e);return e.displayType==="bar"?{id:t.id,name:t.name,type:"bar",data:o,itemStyle:{color:i},label:l}:{id:t.id,name:t.name,type:"line",data:o,showSymbol:e.showSymbols,symbolSize:c,lineStyle:{color:i,type:e.line.style??f,width:u[e.line.width??y]},itemStyle:{color:i},areaStyle:e.displayType==="area"?{color:i,opacity:d}:void 0,label:l}}function T(t){const{series:e,yAxis:i,theme:o,seriesColorOverrides:l}=t,r=n(t);return{animation:!1,color:o.seriesColors,textStyle:{fontFamily:o.fontFamily,color:o.labelColor},grid:{...m,containLabel:!1},tooltip:{trigger:"axis",backgroundColor:o.tooltipBackgroundColor,borderColor:o.tooltipBorderColor,textStyle:{color:o.labelColor},valueFormatter:r},xAxis:{type:"time",axisLine:{lineStyle:{color:o.axisLineColor}},axisTick:{show:!1},axisLabel:{color:o.labelColor,hideOverlap:!0,formatter:S},splitLine:{show:!1}},yAxis:{type:i.scale==="log"?"log":"value",scale:i.includeZero!==!0,min:i.min,max:i.max,axisLine:{show:!1},axisLabel:{color:o.labelColor,formatter:r},splitLine:{lineStyle:{color:o.splitLineColor}}},series:e.map((s,a)=>C(s,t,l[s.id]??o.seriesColors[a%o.seriesColors.length]))}}exports.buildTimeSeriesOption=T;
 //# sourceMappingURL=time-series-option.cjs.map

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-series-option.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\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 TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  legend: TimeSeriesLegendMode;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\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: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\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 buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(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: false,\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      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["LEGEND_HEIGHT_PX","GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
+{"version":3,"file":"time-series-option.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\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 TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\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: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\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 buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, yAxis, theme, seriesColorOverrides } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(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: false,\n    },\n    tooltip: {\n      trigger: \"axis\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["GRID_PADDING","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","yAxis","seriesColorOverrides","index"],"mappings":"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"}

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js

@@ -1,11 +1,11 @@
-const n = { top: 16, right: 16, bottom: 24, left: 56 }, u = 6, f = 0.15, y = { thin: 1, normal: 2, thick: 4 }, L = "solid", g = "normal", h = new Intl.DateTimeFormat(void 0, { year: "numeric" }), E = new Intl.DateTimeFormat(void 0, {
+const m = { top: 16, right: 16, bottom: 24, left: 56 }, c = 6, d = 0.15, u = { thin: 1, normal: 2, thick: 4 }, f = "solid", y = "normal", L = new Intl.DateTimeFormat(void 0, { year: "numeric" }), g = new Intl.DateTimeFormat(void 0, {
   day: "2-digit",
   month: "2-digit"
-}), b = new Intl.DateTimeFormat(void 0, {
+}), h = new Intl.DateTimeFormat(void 0, {
   hour: "2-digit",
   minute: "2-digit",
   hour12: !1
-}), p = new Intl.DateTimeFormat(void 0, {
+}), b = new Intl.DateTimeFormat(void 0, {
   hour: "2-digit",
   minute: "2-digit",
   second: "2-digit",
@@ -13,70 +13,60 @@ const n = { top: 16, right: 16, bottom: 24, left: 56 }, u = 6, f = 0.15, y = { t
 });
 function S(t) {
   const e = new Date(t);
-  return e.getSeconds() !== 0 || e.getMilliseconds() !== 0 ? p.format(e) : e.getHours() !== 0 || e.getMinutes() !== 0 ? b.format(e) : e.getMonth() === 0 && e.getDate() === 1 ? h.format(e) : E.format(e);
+  return e.getSeconds() !== 0 || e.getMilliseconds() !== 0 ? b.format(e) : e.getHours() !== 0 || e.getMinutes() !== 0 ? h.format(e) : e.getMonth() === 0 && e.getDate() === 1 ? L.format(e) : g.format(e);
 }
-function c(t) {
+function n(t) {
   const { valueFormatter: e } = t;
   if (e)
     return (i) => i === null ? "" : e(i);
 }
-function T(t) {
-  const { showValueLabels: e, theme: i } = t, l = c(t);
+function p(t) {
+  const { showValueLabels: e, theme: i } = t, o = n(t);
   return {
     show: e,
     position: "top",
     color: i.labelColor,
-    formatter: l ? (o) => l(o.value[1]) : void 0
+    formatter: o ? (l) => o(l.value[1]) : void 0
   };
 }
-function _(t, e, i) {
-  const l = t.points.map((r) => [
+function x(t, e, i) {
+  const o = t.points.map((r) => [
     r.timestamp,
     r.value
-  ]), o = T(e);
-  return e.displayType === "bar" ? { id: t.id, name: t.name, type: "bar", data: l, itemStyle: { color: i }, label: o } : {
+  ]), l = p(e);
+  return e.displayType === "bar" ? { id: t.id, name: t.name, type: "bar", data: o, itemStyle: { color: i }, label: l } : {
     id: t.id,
     name: t.name,
     type: "line",
-    data: l,
+    data: o,
     showSymbol: e.showSymbols,
-    symbolSize: u,
+    symbolSize: c,
     lineStyle: {
       color: i,
-      type: e.line.style ?? L,
-      width: y[e.line.width ?? g]
+      type: e.line.style ?? f,
+      width: u[e.line.width ?? y]
     },
     itemStyle: { color: i },
-    areaStyle: e.displayType === "area" ? { color: i, opacity: f } : void 0,
-    label: o
+    areaStyle: e.displayType === "area" ? { color: i, opacity: d } : void 0,
+    label: l
   };
 }
-function x(t) {
-  const { series: e, legend: i, yAxis: l, theme: o, seriesColorOverrides: r } = t, s = i !== "none" && e.length > 0, a = c(t);
+function C(t) {
+  const { series: e, yAxis: i, theme: o, seriesColorOverrides: l } = t, r = n(t);
   return {
     animation: !1,
     color: o.seriesColors,
     textStyle: { fontFamily: o.fontFamily, color: o.labelColor },
     grid: {
-      ...n,
-      top: s ? n.top + 32 : n.top,
+      ...m,
       containLabel: !1
     },
-    legend: s ? {
-      type: "scroll",
-      top: 0,
-      left: 0,
-      icon: "roundRect",
-      itemHeight: 8,
-      itemWidth: 12,
-      textStyle: { color: o.labelColor }
-    } : { show: !1 },
     tooltip: {
       trigger: "axis",
       backgroundColor: o.tooltipBackgroundColor,
       borderColor: o.tooltipBorderColor,
       textStyle: { color: o.labelColor },
-      valueFormatter: a
+      valueFormatter: r
     },
     xAxis: {
       type: "time",
@@ -86,24 +76,24 @@ function x(t) {
       splitLine: { show: !1 }
     },
     yAxis: {
-      type: l.scale === "log" ? "log" : "value",
-      scale: l.includeZero !== !0,
-      min: l.min,
-      max: l.max,
+      type: i.scale === "log" ? "log" : "value",
+      scale: i.includeZero !== !0,
+      min: i.min,
+      max: i.max,
       axisLine: { show: !1 },
-      axisLabel: { color: o.labelColor, formatter: a },
+      axisLabel: { color: o.labelColor, formatter: r },
       splitLine: { lineStyle: { color: o.splitLineColor } }
     },
     series: e.map(
-      (m, d) => _(
-        m,
+      (s, a) => x(
+        s,
         t,
-        r[m.id] ?? o.seriesColors[d % o.seriesColors.length]
+        l[s.id] ?? o.seriesColors[a % o.seriesColors.length]
       )
     )
   };
 }
 export {
-  x as buildTimeSeriesOption
+  C as buildTimeSeriesOption
 };
 //# sourceMappingURL=time-series-option.js.map

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-series-option.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\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 TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  legend: TimeSeriesLegendMode;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\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: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\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 buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(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: false,\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      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
+{"version":3,"file":"time-series-option.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\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 TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\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: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\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 buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, yAxis, theme, seriesColorOverrides } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(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: false,\n    },\n    tooltip: {\n      trigger: \"axis\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["GRID_PADDING","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","yAxis","seriesColorOverrides","index"],"mappings":"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"}

package/dist/types/charts.index.d.ts

@@ -1,2 +1,5 @@
+export * from "./ui/components/charts/BarChart/BarChart";
 export * from "./ui/components/charts/chart-palette";
+export * from "./ui/components/charts/ChartColorPicker/ChartColorPicker";
+export * from "./ui/components/charts/ChartLegend/ChartLegend";
 export * from "./ui/components/charts/TimeSeriesChart/TimeSeriesChart";

package/dist/types/ui/components/charts/BarChart/BarChart.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type ChartLegendLabels } from "../ChartLegend/ChartLegend";
+import { type BarChartLegendMode, type BarChartOrientation, type BarChartSeriesData, type BarChartStacking, type BarChartValueAxisOptions, type BarChartValueLabel } from "./bar-chart-option";
+import "./bar-chart.css";
+export type { BarChartAxisScale, BarChartLegendMode, BarChartOrientation, BarChartPoint, BarChartSeriesData, BarChartStacking, BarChartValueAxisOptions, BarChartValueLabel, } from "./bar-chart-option";
+export type BarChartProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+    categories: string[];
+    series: BarChartSeriesData[];
+    orientation?: BarChartOrientation;
+    stacking?: BarChartStacking;
+    valueLabel?: BarChartValueLabel;
+    legend?: BarChartLegendMode;
+    valueAxis?: BarChartValueAxisOptions;
+    valueFormatter?: (value: number) => string;
+    onSeriesColorChange?: (seriesId: string, colorToken: string | null) => void;
+    legendLabels?: Partial<ChartLegendLabels>;
+};
+export declare function BarChart({ categories, series, orientation, stacking, valueLabel, legend, valueAxis, valueFormatter, onSeriesColorChange, legendLabels, className, ...props }: BarChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/charts/BarChart/bar-chart-option.d.ts

@@ -0,0 +1,34 @@
+import type { ChartTheme } from "../chart-theme";
+export interface BarChartPoint {
+    category: string;
+    value: number | null;
+}
+export interface BarChartSeriesData {
+    id: string;
+    name: string;
+    points: BarChartPoint[];
+    colorToken?: string;
+}
+export type BarChartOrientation = "vertical" | "horizontal";
+export type BarChartStacking = "off" | "stacked" | "percent";
+export type BarChartValueLabel = "auto" | "always" | "never";
+export type BarChartLegendMode = "inline" | "none";
+export type BarChartAxisScale = "linear" | "log";
+export interface BarChartValueAxisOptions {
+    scale?: BarChartAxisScale;
+    min?: number;
+    max?: number;
+    includeZero?: boolean;
+}
+export interface BarChartOptionInput {
+    categories: string[];
+    series: BarChartSeriesData[];
+    orientation: BarChartOrientation;
+    stacking: BarChartStacking;
+    valueLabel: BarChartValueLabel;
+    valueAxis: BarChartValueAxisOptions;
+    theme: ChartTheme;
+    seriesColorOverrides: Record<string, string>;
+    valueFormatter?: (value: number) => string;
+}
+export declare function buildBarChartOption(input: BarChartOptionInput): Record<string, unknown>;