@perses-dev/components 0.36.1 → 0.37.0

package/dist/FontSizeSelector/FontSizeSelector.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type FontSizeOption = number | undefined;
+export interface FontSizeSelectorProps {
+    value: FontSizeOption;
+    onChange: (fontSize: FontSizeOption) => void;
+}
+export declare function FontSizeSelector({ value, onChange }: FontSizeSelectorProps): JSX.Element;
+//# sourceMappingURL=FontSizeSelector.d.ts.map

package/dist/FontSizeSelector/FontSizeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontSizeSelector.d.ts","sourceRoot":"","sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"names":[],"mappings":";AAqCA,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,eAmB1E"}

package/dist/FontSizeSelector/FontSizeSelector.js

@@ -0,0 +1,124 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License |  Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing |  software
+// distributed under the License is distributed on an "AS IS" BASIS |
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OptionsEditorControl } from '../OptionsEditorLayout';
+import { SettingsAutocomplete } from '../SettingsAutocomplete';
+const FONT_SIZE_OPTIONS = [
+    {
+        id: 'default',
+        label: 'Default',
+        value: undefined
+    },
+    {
+        id: '12',
+        label: '12',
+        value: 12
+    },
+    {
+        id: '14',
+        label: '14',
+        value: 14
+    },
+    {
+        id: '16',
+        label: '16',
+        value: 16
+    },
+    {
+        id: '20',
+        label: '20',
+        value: 20
+    },
+    {
+        id: '24',
+        label: '24',
+        value: 24
+    },
+    {
+        id: '28',
+        label: '28',
+        value: 28
+    },
+    {
+        id: '32',
+        label: '32',
+        value: 32
+    },
+    {
+        id: '36',
+        label: '36',
+        value: 36
+    },
+    {
+        id: '40',
+        label: '40',
+        value: 40
+    },
+    {
+        id: '48',
+        label: '48',
+        value: 48
+    },
+    {
+        id: '56',
+        label: '56',
+        value: 56
+    },
+    {
+        id: '64',
+        label: '64',
+        value: 64
+    },
+    {
+        id: '72',
+        label: '72',
+        value: 72
+    },
+    {
+        id: '96',
+        label: '96',
+        value: 96
+    },
+    {
+        id: '128',
+        label: '128',
+        value: 128
+    },
+    {
+        id: '160',
+        label: '160',
+        value: 160
+    },
+    {
+        id: '192',
+        label: '192',
+        value: 192
+    }
+];
+export function FontSizeSelector({ value , onChange  }) {
+    const handleFontSizeChange = (_, { value  })=>{
+        onChange(value);
+    };
+    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+        label: "Font Size",
+        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+            value: FONT_SIZE_OPTIONS.find((o)=>o.value === value),
+            options: FONT_SIZE_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handleFontSizeChange,
+            disableClearable: true
+        })
+    });
+}
+
+//# sourceMappingURL=FontSizeSelector.js.map

package/dist/FontSizeSelector/FontSizeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License |  Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing |  software\n// distributed under the License is distributed on an \"AS IS\" BASIS |\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst FONT_SIZE_OPTIONS = [\n  { id: 'default', label: 'Default', value: undefined },\n  { id: '12', label: '12', value: 12 },\n  { id: '14', label: '14', value: 14 },\n  { id: '16', label: '16', value: 16 },\n  { id: '20', label: '20', value: 20 },\n  { id: '24', label: '24', value: 24 },\n  { id: '28', label: '28', value: 28 },\n  { id: '32', label: '32', value: 32 },\n  { id: '36', label: '36', value: 36 },\n  { id: '40', label: '40', value: 40 },\n  { id: '48', label: '48', value: 48 },\n  { id: '56', label: '56', value: 56 },\n  { id: '64', label: '64', value: 64 },\n  { id: '72', label: '72', value: 72 },\n  { id: '96', label: '96', value: 96 },\n  { id: '128', label: '128', value: 128 },\n  { id: '160', label: '160', value: 160 },\n  { id: '192', label: '192', value: 192 },\n];\n\nexport type FontSizeOption = number | undefined;\n\nexport interface FontSizeSelectorProps {\n  value: FontSizeOption;\n  onChange: (fontSize: FontSizeOption) => void;\n}\n\nexport function FontSizeSelector({ value, onChange }: FontSizeSelectorProps) {\n  const handleFontSizeChange = (_: unknown, { value }: { value: FontSizeOption }) => {\n    onChange(value);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Font Size\"\n      control={\n        <SettingsAutocomplete\n          value={FONT_SIZE_OPTIONS.find((o) => o.value === value)}\n          options={FONT_SIZE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleFontSizeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","FONT_SIZE_OPTIONS","id","label","value","undefined","FontSizeSelector","onChange","handleFontSizeChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"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"}

package/dist/FontSizeSelector/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FontSizeSelector';
+//# sourceMappingURL=index.d.ts.map

package/dist/FontSizeSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FontSizeSelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}

package/dist/FontSizeSelector/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './FontSizeSelector';
+
+//# sourceMappingURL=index.js.map

package/dist/FontSizeSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FontSizeSelector/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './FontSizeSelector';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,oBAAoB,CAAC"}

package/dist/LineChart/LineChart.d.ts

@@ -1,16 +1,10 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { UnitOptions } from '@perses-dev/core';
 import type { EChartsCoreOption, GridComponentOption, LegendComponentOption, YAXisComponentOption } from 'echarts';
-import { EChartsDataFormat } from '../model/graph';
-import { ZoomEventData } from './utils';
-export declare type TooltipConfig = {
-    wrapLabels: boolean;
-    hidden?: boolean;
-};
+import { EChartsDataFormat, ChartInstance } from '../model/graph';
+import { TooltipConfig } from '../TimeSeriesTooltip';
+import { ZoomEventData } from '../utils';
 export interface LineChartProps {
-    /**
-     * Height of the chart
-     */
     height: number;
     data: EChartsDataFormat;
     yAxis?: YAXisComponentOption;
@@ -24,19 +18,5 @@ export interface LineChartProps {
     onDoubleClick?: (e: MouseEvent) => void;
     __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
 }
-declare type LineChartHandleFocusOpts = {
-    id: string;
-};
-export declare type LineChartHandle = {
-    /**
-     * Highlight the series associated with the specified options.
-     */
-    highlightSeries: (opts: LineChartHandleFocusOpts) => void;
-    /**
-     * Clear all highlighted series.
-     */
-    clearHighlightedSeries: () => void;
-};
-export declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<LineChartHandle>>;
-export {};
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<ChartInstance>>;
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA8D,MAAM,OAAO,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAKnD,OAAO,EAOL,aAAa,EACd,MAAM,SAAS,CAAC;AAgBjB,oBAAY,aAAa,GAAG;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAKD,aAAK,wBAAwB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,SAAS,wFAsPpB,CAAC"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA0B,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE1F,OAAO,EAAuC,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1F,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAgBlB,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GAqPpB,CAAC"}

package/dist/LineChart/LineChart.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { use } from 'echarts/core';
 import { LineChart as EChartsLineChart } from 'echarts/charts';
@@ -19,9 +19,9 @@ import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent,
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { TimeSeriesTooltip } from '../TimeSeriesTooltip';
+import { LineChartTooltip } from '../TimeSeriesTooltip';
 import { useTimeZone } from '../context/TimeZoneProvider';
-import { clearHighlightedSeries, enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from './utils';
+import { clearHighlightedSeries, enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart } from '../utils';
 use([
     EChartsLineChart,
     GridComponent,
@@ -50,7 +50,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
         return {
             highlightSeries ({ id  }) {
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not highlight series when hovering over legend
                     return;
                 }
                 chartRef.current.dispatchAction({
@@ -60,7 +60,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             },
             clearHighlightedSeries: ()=>{
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not clear highlight series
                     return;
                 }
                 clearHighlightedSeries(chartRef.current, data.timeSeries.length);
@@ -245,7 +245,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             }
         },
         children: [
-            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { MouseEvent, useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react';\nimport { UnitOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n};\n\nexport interface LineChartProps {\n  /**\n   * Height of the chart\n   */\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\n// Intentionally making this an object to start because it is plausible we will\n// want to support focusing by other attributes (e.g. index, name) in the future,\n// and starting with an object will make adding them a non-breaking change.\ntype LineChartHandleFocusOpts = {\n  id: string;\n};\n\nexport type LineChartHandle = {\n  /**\n   * Highlight the series associated with the specified options.\n   */\n  highlightSeries: (opts: LineChartHandleFocusOpts) => void;\n\n  /**\n   * Clear all highlighted series.\n   */\n  clearHighlightedSeries: () => void;\n};\n\nexport const LineChart = forwardRef<LineChartHandle, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    unit,\n    grid,\n    legend,\n    tooltipConfig = { wrapLabels: true },\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ id }: LineChartHandleFocusOpts) {\n          if (!chartRef.current) {\n            // No chart. Do nothing.\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // No chart. Do nothing.\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        },\n      };\n    },\n    [data.timeSeries.length]\n  );\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeSeriesTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["React","useImperativeHandle","useMemo","useRef","useState","forwardRef","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","TimeSeriesTooltip","useTimeZone","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","timeSeries","length","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","pinnedPos","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { UnitOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, ChartInstanceFocusOpts, ChartInstance } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { CursorCoordinates, LineChartTooltip, TooltipConfig } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getYAxes,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport interface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const LineChart = forwardRef<ChartInstance, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    unit,\n    grid,\n    legend,\n    tooltipConfig = { wrapLabels: true },\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ id }: ChartInstanceFocusOpts) {\n          if (!chartRef.current) {\n            // when chart undef, do not highlight series when hovering over legend\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // when chart undef, do not clear highlight series\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        },\n      };\n    },\n    [data.timeSeries.length]\n  );\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getYAxes(yAxis, unit),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <LineChartTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            pinnedPos={tooltipPinnedCoords}\n            unit={unit}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","LineChartTooltip","useTimeZone","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","timeSeries","length","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","pinnedPos","onUnpinClick","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/LineChart/index.d.ts

@@ -1,3 +1,2 @@
 export * from './LineChart';
-export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/LineChart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/LineChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/LineChart/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC"}

package/dist/LineChart/index.js

@@ -11,6 +11,5 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './LineChart';
-export * from './utils';
 
 //# sourceMappingURL=index.js.map

package/dist/LineChart/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './LineChart';\nexport * from './utils';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../../src/LineChart/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './LineChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa,CAAC"}

package/dist/StatChart/StatChart.d.ts

@@ -2,6 +2,7 @@
 import { UnitOptions } from '@perses-dev/core';
 import { LineSeriesOption } from 'echarts/charts';
 import { GraphSeries } from '../model/graph';
+import { FontSizeOption } from '../FontSizeSelector';
 export interface StatChartData {
     calculatedValue?: number | null;
     seriesData?: GraphSeries;
@@ -14,6 +15,7 @@ export interface StatChartProps {
     color?: string;
     sparkline?: LineSeriesOption;
     showSeriesName?: boolean;
+    valueFontSize?: FontSizeOption;
 }
 export declare function StatChart(props: StatChartProps): JSX.Element;
 //# sourceMappingURL=StatChart.d.ts.map

package/dist/StatChart/StatChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAe,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI5D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAkI9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAe,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI5D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAUrD,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAoI9C"}

package/dist/StatChart/StatChart.js

@@ -36,7 +36,7 @@ const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
 export function StatChart(props) {
     var ref, ref1;
-    const { width , height , data , unit , color , sparkline , showSeriesName  } = props;
+    const { width , height , data , unit , color , sparkline , showSeriesName , valueFontSize  } = props;
     const chartsTheme = useChartsTheme();
     let formattedValue = '';
     if (data.calculatedValue === null) {
@@ -59,8 +59,10 @@ export function StatChart(props) {
     // calculate value font size and height
     const availableWidth = width - containerPadding * 2;
     const availableHeight = height - seriesNameHeight;
-    const valueFontSize = useOptimalFontSize({
+    const optimalValueFontSize = useOptimalFontSize({
         text: formattedValue,
+        // override the font size if user selects it in the settings
+        fontSizeOverride: valueFontSize,
         fontWeight: VALUE_FONT_WEIGHT,
         // without sparkline, use only 50% of the available width so it looks better for multiseries
         width: sparkline ? availableWidth : availableWidth * 0.5,
@@ -69,9 +71,9 @@ export function StatChart(props) {
         height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
         lineHeight: LINE_HEIGHT
     });
-    const valueFontHeight = valueFontSize * LINE_HEIGHT;
+    const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;
     // make sure the series name font size is slightly smaller than value font size
-    seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);
+    seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
     const option = useMemo(()=>{
         if (data.seriesData === undefined) return chartsTheme.noDataOption;
         const series = data.seriesData;
@@ -150,7 +152,7 @@ export function StatChart(props) {
             /*#__PURE__*/ _jsx(Value, {
                 variant: "h3",
                 color: color,
-                fontSize: valueFontSize,
+                fontSize: optimalValueFontSize,
                 padding: containerPadding,
                 children: formattedValue
             }),

package/dist/StatChart/StatChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { formatValue, UnitOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\nimport { useOptimalFontSize } from './calculateFontSize';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n  calculatedValue?: number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline, showSeriesName } = props;\n  const chartsTheme = useChartsTheme();\n\n  let formattedValue = '';\n  if (data.calculatedValue === null) {\n    formattedValue = 'null';\n  } else if (typeof data.calculatedValue === 'number') {\n    formattedValue = formatValue(data.calculatedValue, unit);\n  }\n\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const valueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = valueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        name: series.name,\n        data: series.values,\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n        min: (value: { min: number; max: number }) => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with PercentDecimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={valueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: height - seriesNameHeight - valueFontHeight,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","formatValue","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","data","width","height","unit","color","sparkline","showSeriesName","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","valueFontSize","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { formatValue, UnitOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\nimport { FontSizeOption } from '../FontSizeSelector';\nimport { useOptimalFontSize } from './calculateFontSize';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n  calculatedValue?: number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n  valueFontSize?: FontSizeOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline, showSeriesName, valueFontSize } = props;\n  const chartsTheme = useChartsTheme();\n\n  let formattedValue = '';\n  if (data.calculatedValue === null) {\n    formattedValue = 'null';\n  } else if (typeof data.calculatedValue === 'number') {\n    formattedValue = formatValue(data.calculatedValue, unit);\n  }\n\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const optimalValueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    // override the font size if user selects it in the settings\n    fontSizeOverride: valueFontSize,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        name: series.name,\n        data: series.values,\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n        min: (value: { min: number; max: number }) => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with PercentDecimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={optimalValueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: height - seriesNameHeight - valueFontHeight,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","formatValue","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","data","width","height","unit","color","sparkline","showSeriesName","valueFontSize","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}

package/dist/StatChart/calculateFontSize.d.ts

@@ -1,3 +1,4 @@
+import { FontSizeOption } from '../FontSizeSelector';
 interface CalculateFontSize {
     text: string;
     fontWeight: number;
@@ -5,10 +6,11 @@ interface CalculateFontSize {
     height: number;
     lineHeight: number;
     maxSize?: number;
+    fontSizeOverride?: FontSizeOption;
 }
 /**
  * Find the optimal font size given available space
  */
-export declare function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize }: CalculateFontSize): number;
+export declare function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize, fontSizeOverride, }: CalculateFontSize): number;
 export {};
 //# sourceMappingURL=calculateFontSize.d.ts.map

package/dist/StatChart/calculateFontSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calculateFontSize.d.ts","sourceRoot":"","sources":["../../src/StatChart/calculateFontSize.ts"],"names":[],"mappings":"AAeA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAcD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,iBAAiB,UAqB7G"}
+{"version":3,"file":"calculateFontSize.d.ts","sourceRoot":"","sources":["../../src/StatChart/calculateFontSize.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC;AAcD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,GACjB,EAAE,iBAAiB,UA0BnB"}

package/dist/StatChart/calculateFontSize.js

@@ -23,9 +23,13 @@ function getGlobalCanvasContext() {
 }
 /**
  * Find the optimal font size given available space
- */ export function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize  }) {
+ */ export function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize , fontSizeOverride  }) {
     const ctx = getGlobalCanvasContext();
     const chartsTheme = useChartsTheme();
+    // if user has selected a font size in the settings, use it instead of calculating the optimal size
+    if (fontSizeOverride !== undefined) {
+        return Number(fontSizeOverride);
+    }
     const textStyle = chartsTheme.echartsTheme.textStyle;
     var ref;
     const fontSize = (ref = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && ref !== void 0 ? ref : 12;