@perses-dev/components 0.0.0-snapshot-explorer-plugin-c4a7621 → 0.0.0-snapshot-profile-8090608

package/dist/GaugeChart/GaugeChart.js

@@ -1,214 +0,0 @@
-// 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 { formatValue, useDeepMemo } from '@perses-dev/core';
-import { use } from 'echarts/core';
-import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
-import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
-import { useChartsTheme } from '../context';
-import { EChart } from '../EChart';
-use([
-    EChartsGaugeChart,
-    GridComponent,
-    TitleComponent,
-    TooltipComponent,
-    CanvasRenderer
-]);
-const PROGRESS_WIDTH = 16;
-// adjusts when to show pointer icon
-const GAUGE_SMALL_BREAKPOINT = 170;
-export function GaugeChart(props) {
-    const { width, height, data, format, axisLine, max } = props;
-    const chartsTheme = useChartsTheme();
-    // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
-    const option = useDeepMemo(()=>{
-        if (data.value === undefined) return chartsTheme.noDataOption;
-        // adjusts fontSize depending on number of characters
-        const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
-        return {
-            title: {
-                show: false
-            },
-            tooltip: {
-                show: false
-            },
-            series: [
-                {
-                    type: 'gauge',
-                    center: [
-                        '50%',
-                        '65%'
-                    ],
-                    radius: '86%',
-                    startAngle: 200,
-                    endAngle: -20,
-                    min: 0,
-                    max,
-                    silent: true,
-                    progress: {
-                        show: true,
-                        width: PROGRESS_WIDTH,
-                        itemStyle: {
-                            color: 'auto'
-                        }
-                    },
-                    pointer: {
-                        show: false
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: [
-                                [
-                                    1,
-                                    'rgba(127,127,127,0.35)'
-                                ]
-                            ],
-                            width: PROGRESS_WIDTH
-                        }
-                    },
-                    axisTick: {
-                        show: false,
-                        distance: 0
-                    },
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        show: false,
-                        distance: -18,
-                        color: '#999',
-                        fontSize: 12
-                    },
-                    anchor: {
-                        show: false
-                    },
-                    title: {
-                        show: false
-                    },
-                    detail: {
-                        show: false
-                    },
-                    data: [
-                        {
-                            value: data.value
-                        }
-                    ]
-                },
-                {
-                    type: 'gauge',
-                    center: [
-                        '50%',
-                        '65%'
-                    ],
-                    radius: '100%',
-                    startAngle: 200,
-                    endAngle: -20,
-                    min: 0,
-                    max,
-                    pointer: {
-                        show: true,
-                        // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade
-                        icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',
-                        length: 10,
-                        width: 5,
-                        offsetCenter: [
-                            0,
-                            '-49%'
-                        ],
-                        itemStyle: {
-                            color: 'auto'
-                        }
-                    },
-                    axisLine,
-                    axisTick: {
-                        show: false
-                    },
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        show: false
-                    },
-                    detail: {
-                        show: true,
-                        width: '60%',
-                        borderRadius: 8,
-                        offsetCenter: [
-                            0,
-                            '-9%'
-                        ],
-                        color: 'inherit',
-                        fontSize: valueSizeClamp,
-                        formatter: data.value === null ? // at this level because the `formatter` function argument is `NaN`
-                        // when the value is `null`, making it difficult to differentiate
-                        // `null` from a true `NaN` case.
-                        ()=>'null' : (value)=>{
-                            return formatValue(value, format);
-                        }
-                    },
-                    data: [
-                        {
-                            value: data.value,
-                            name: data.label,
-                            // TODO: new UX for series names, create separate React component or reuse ListLegendItem
-                            // https://echarts.apache.org/en/option.html#series-gauge.data.title
-                            title: {
-                                show: true,
-                                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit',
-                                offsetCenter: [
-                                    0,
-                                    '55%'
-                                ],
-                                overflow: 'truncate',
-                                fontSize: 12,
-                                width: width * 0.8
-                            }
-                        }
-                    ]
-                }
-            ]
-        };
-    }, [
-        data,
-        width,
-        height,
-        chartsTheme,
-        format,
-        axisLine,
-        max
-    ]);
-    return /*#__PURE__*/ _jsx(EChart, {
-        sx: {
-            width: width,
-            height: height,
-            padding: `${chartsTheme.container.padding.default}px`
-        },
-        option: option,
-        theme: chartsTheme.echartsTheme
-    });
-}
-/**
- * Responsive font size depending on number of characters, clamp used
- * to ensure size stays within given range
- */ export function getResponsiveValueSize(value, format, width, height) {
-    const MIN_SIZE = 3;
-    const MAX_SIZE = 24;
-    const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = typeof value === 'number' ? formatValue(value, format) : `${value}`;
-    const valueCharacters = formattedValue.length ?? 2;
-    const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
-    return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
-}
-
-//# sourceMappingURL=GaugeChart.js.map

package/dist/GaugeChart/GaugeChart.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/GaugeChart/GaugeChart.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 { formatValue, useDeepMemo, FormatOptions } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { ReactElement } from 'react';\nimport { useChartsTheme } from '../context';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\nexport interface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  format: FormatOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps): ReactElement {\n  const { width, height, data, format, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, 'rgba(127,127,127,0.35)']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter:\n              data.value === null\n                ? // We use a different function when we *know* the value is null\n                  // at this level because the `formatter` function argument is `NaN`\n                  // when the value is `null`, making it difficult to differentiate\n                  // `null` from a true `NaN` case.\n                  (): string => 'null'\n                : (value: number): string | undefined => {\n                    return formatValue(value, format);\n                  },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, format, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(\n  value: number | null,\n  format: FormatOptions,\n  width: number,\n  height: number\n): string {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = typeof value === 'number' ? formatValue(value, format) : `${value}`;\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["formatValue","useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","format","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}

package/dist/GaugeChart/index.d.ts

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

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

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

package/dist/GaugeChart/index.js

@@ -1,15 +0,0 @@
-// 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 './GaugeChart';
-
-//# sourceMappingURL=index.js.map

package/dist/GaugeChart/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/GaugeChart/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 './GaugeChart';\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,eAAe"}

package/dist/PieChart/PieChart.d.ts

@@ -1,14 +0,0 @@
-import { LegendComponentOption } from 'echarts/components';
-import { ReactElement } from 'react';
-export interface PieChartData {
-    name: string;
-    value: number | null;
-}
-export interface PieChartProps {
-    width: number;
-    height: number;
-    data: PieChartData[] | null;
-    legend?: LegendComponentOption;
-}
-export declare function PieChart(props: PieChartProps): ReactElement;
-//# sourceMappingURL=PieChart.d.ts.map

package/dist/PieChart/PieChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../src/PieChart/PieChart.tsx"],"names":[],"mappings":"AAeA,OAAO,EAKL,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQrC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CA2D3D"}

package/dist/PieChart/PieChart.js

@@ -1,92 +0,0 @@
-// Copyright 2024 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 { use } from 'echarts/core';
-import { PieChart as EChartsPieChart } from 'echarts/charts';
-import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
-import { Box } from '@mui/material';
-import { useChartsTheme } from '../context/ChartsProvider';
-import { EChart } from '../EChart';
-use([
-    EChartsPieChart,
-    GridComponent,
-    DatasetComponent,
-    TitleComponent,
-    TooltipComponent,
-    CanvasRenderer
-]);
-const PIE_WIN_WIDTH = 12;
-const PIE_GAP = 4;
-export function PieChart(props) {
-    const { width, height, data } = props;
-    const chartsTheme = useChartsTheme();
-    const option = {
-        title: {
-            text: 'Referer of a Website',
-            subtext: 'Fake Data',
-            left: 'center'
-        },
-        tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        axisLabel: {
-            overflow: 'truncate',
-            width: width / 3
-        },
-        series: [
-            {
-                name: 'Access From',
-                type: 'pie',
-                radius: '55%',
-                label: false,
-                center: [
-                    '40%',
-                    '50%'
-                ],
-                data: data,
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)'
-                    }
-                }
-            }
-        ],
-        itemStyle: {
-            borderRadius: 2,
-            color: chartsTheme.echartsTheme[0]
-        }
-    };
-    return /*#__PURE__*/ _jsx(Box, {
-        style: {
-            width: width,
-            height: height
-        },
-        sx: {
-            overflow: 'auto'
-        },
-        children: /*#__PURE__*/ _jsx(EChart, {
-            sx: {
-                minHeight: height,
-                height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%'
-            },
-            option: option,
-            theme: chartsTheme.echartsTheme
-        })
-    });
-}
-
-//# sourceMappingURL=PieChart.js.map

package/dist/PieChart/PieChart.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/PieChart/PieChart.tsx"],"sourcesContent":["// Copyright 2024 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 { use } from 'echarts/core';\nimport { PieChart as EChartsPieChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  LegendComponentOption,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { EChart } from '../EChart';\n\nuse([EChartsPieChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PIE_WIN_WIDTH = 12;\nconst PIE_GAP = 4;\nexport interface PieChartData {\n  name: string;\n  value: number | null;\n}\n\nexport interface PieChartProps {\n  width: number;\n  height: number;\n  data: PieChartData[] | null;\n  legend?: LegendComponentOption;\n}\n\nexport function PieChart(props: PieChartProps): ReactElement {\n  const { width, height, data } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option = {\n    title: {\n      text: 'Referer of a Website',\n      subtext: 'Fake Data',\n      left: 'center',\n    },\n    tooltip: {\n      trigger: 'item',\n      formatter: '{a} <br/>{b} : {c} ({d}%)',\n    },\n    axisLabel: {\n      overflow: 'truncate',\n      width: width / 3,\n    },\n    series: [\n      {\n        name: 'Access From',\n        type: 'pie',\n        radius: '55%',\n        label: false,\n        center: ['40%', '50%'],\n        data: data,\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowOffsetX: 0,\n            shadowColor: 'rgba(0, 0, 0, 0.5)',\n          },\n        },\n      },\n    ],\n    itemStyle: {\n      borderRadius: 2,\n      color: chartsTheme.echartsTheme[0],\n    },\n  };\n\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{ overflow: 'auto' }}\n    >\n      <EChart\n        sx={{\n          minHeight: height,\n          height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["use","PieChart","EChartsPieChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","useChartsTheme","EChart","PIE_WIN_WIDTH","PIE_GAP","props","width","height","data","chartsTheme","option","title","text","subtext","left","tooltip","trigger","formatter","axisLabel","overflow","series","name","type","radius","label","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","borderRadius","color","echartsTheme","style","sx","minHeight","length","theme"],"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,SAASA,GAAG,QAAQ,eAAe;AACnC,SAASC,YAAYC,eAAe,QAAQ,iBAAiB;AAC7D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,QAEX,qBAAqB;AAC5B,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,MAAM,QAAQ,YAAY;AAEnCV,IAAI;IAACE;IAAiBC;IAAeC;IAAkBC;IAAgBC;IAAkBC;CAAe;AAExG,MAAMI,gBAAgB;AACtB,MAAMC,UAAU;AAahB,OAAO,SAASX,SAASY,KAAoB;IAC3C,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IAChC,MAAMI,cAAcR;IAEpB,MAAMS,SAAS;QACbC,OAAO;YACLC,MAAM;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,SAAS;YACPC,SAAS;YACTC,WAAW;QACb;QACAC,WAAW;YACTC,UAAU;YACVb,OAAOA,QAAQ;QACjB;QACAc,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNC,QAAQ;gBACRC,OAAO;gBACPC,QAAQ;oBAAC;oBAAO;iBAAM;gBACtBjB,MAAMA;gBACNkB,UAAU;oBACRC,WAAW;wBACTC,YAAY;wBACZC,eAAe;wBACfC,aAAa;oBACf;gBACF;YACF;SACD;QACDH,WAAW;YACTI,cAAc;YACdC,OAAOvB,YAAYwB,YAAY,CAAC,EAAE;QACpC;IACF;IAEA,qBACE,KAACjC;QACCkC,OAAO;YACL5B,OAAOA;YACPC,QAAQA;QACV;QACA4B,IAAI;YAAEhB,UAAU;QAAO;kBAEvB,cAAA,KAACjB;YACCiC,IAAI;gBACFC,WAAW7B;gBACXA,QAAQC,OAAOA,KAAK6B,MAAM,GAAIlC,CAAAA,gBAAgBC,OAAM,IAAK;YAC3D;YACAM,QAAQA;YACR4B,OAAO7B,YAAYwB,YAAY;;;AAIvC"}

package/dist/PieChart/index.d.ts

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

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

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

package/dist/PieChart/index.js

@@ -1,15 +0,0 @@
-// Copyright 2024 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 './PieChart';
-
-//# sourceMappingURL=index.js.map

package/dist/PieChart/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/PieChart/index.ts"],"sourcesContent":["// Copyright 2024 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 './PieChart';\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"}

package/dist/StatChart/StatChart.d.ts

@@ -1,21 +0,0 @@
-import { FC } from 'react';
-import { FormatOptions } from '@perses-dev/core';
-import { LineSeriesOption } from 'echarts/charts';
-import { GraphSeries } from '../model';
-import { FontSizeOption } from '../FontSizeSelector';
-export interface StatChartData {
-    color: string;
-    calculatedValue?: string | number | null;
-    seriesData?: GraphSeries;
-}
-export interface StatChartProps {
-    width: number;
-    height: number;
-    data: StatChartData;
-    format?: FormatOptions;
-    sparkline?: LineSeriesOption;
-    showSeriesName?: boolean;
-    valueFontSize?: FontSizeOption;
-}
-export declare const StatChart: FC<StatChartProps>;
-//# sourceMappingURL=StatChart.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAWrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,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,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiIxC,CAAC"}

package/dist/StatChart/StatChart.js

@@ -1,185 +0,0 @@
-// 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, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Box, Typography, styled } from '@mui/material';
-import merge from 'lodash/merge';
-import { use } from 'echarts/core';
-import { LineChart as EChartsLineChart } from 'echarts/charts';
-import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
-import { useChartsTheme } from '../context';
-import { EChart } from '../EChart';
-import { useOptimalFontSize } from './calculateFontSize';
-import { formatStatChartValue } from './utils/formatStatChartValue';
-use([
-    EChartsLineChart,
-    GridComponent,
-    DatasetComponent,
-    TitleComponent,
-    TooltipComponent,
-    CanvasRenderer
-]);
-const LINE_HEIGHT = 1.2;
-const SERIES_NAME_MAX_FONT_SIZE = 30;
-const SERIES_NAME_FONT_WEIGHT = 400;
-const VALUE_FONT_WEIGHT = 700;
-export const StatChart = (props)=>{
-    const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
-    const chartsTheme = useChartsTheme();
-    const color = data.color;
-    const formattedValue = formatStatChartValue(data.calculatedValue, format);
-    const containerPadding = chartsTheme.container.padding.default;
-    // calculate series name font size and height
-    let seriesNameFontSize = useOptimalFontSize({
-        text: data?.seriesData?.name ?? '',
-        fontWeight: SERIES_NAME_FONT_WEIGHT,
-        width,
-        height: height * 0.125,
-        lineHeight: LINE_HEIGHT,
-        maxSize: SERIES_NAME_MAX_FONT_SIZE
-    });
-    const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;
-    // calculate value font size and height
-    const availableWidth = width - containerPadding * 2;
-    const availableHeight = height - seriesNameHeight;
-    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,
-        // with sparkline, use only 25% of available height to leave room for chart
-        // without sparkline, value should take up 90% of available space
-        height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
-        lineHeight: LINE_HEIGHT
-    });
-    const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;
-    // make sure the series name font size is slightly smaller than value font size
-    seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
-    const option = useMemo(()=>{
-        if (data.seriesData === undefined) return chartsTheme.noDataOption;
-        const series = data.seriesData;
-        const statSeries = [];
-        if (sparkline !== undefined) {
-            const lineSeries = {
-                type: 'line',
-                name: series.name,
-                data: series.values,
-                zlevel: 1,
-                symbol: 'none',
-                animation: false,
-                silent: true
-            };
-            const mergedSeries = merge(lineSeries, sparkline);
-            statSeries.push(mergedSeries);
-        }
-        const option = {
-            title: {
-                show: false
-            },
-            grid: {
-                show: false,
-                top: '35%',
-                right: 0,
-                bottom: 0,
-                left: 0,
-                containLabel: false
-            },
-            xAxis: {
-                type: 'time',
-                show: false,
-                boundaryGap: false
-            },
-            yAxis: {
-                type: 'value',
-                show: false,
-                min: (value)=>{
-                    if (value.min >= 0 && value.min <= 1) {
-                        // helps with percent-decimal units, or datasets that return 0 or 1 booleans
-                        return 0;
-                    }
-                    return value.min;
-                }
-            },
-            tooltip: {
-                show: false
-            },
-            series: statSeries
-        };
-        return option;
-    }, [
-        data,
-        chartsTheme,
-        sparkline
-    ]);
-    const textAlignment = sparkline ? 'auto' : 'center';
-    const textStyles = {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: textAlignment,
-        alignItems: textAlignment
-    };
-    return /*#__PURE__*/ _jsxs(Box, {
-        sx: {
-            height: '100%',
-            width: '100%',
-            ...textStyles
-        },
-        children: [
-            showSeriesName && /*#__PURE__*/ _jsx(SeriesName, {
-                padding: containerPadding,
-                fontSize: seriesNameFontSize,
-                children: data.seriesData?.name
-            }),
-            /*#__PURE__*/ _jsx(Value, {
-                variant: "h3",
-                color: color,
-                fontSize: optimalValueFontSize,
-                padding: containerPadding,
-                children: formattedValue
-            }),
-            sparkline !== undefined && /*#__PURE__*/ _jsx(EChart, {
-                sx: {
-                    width: '100%',
-                    height: height - seriesNameHeight - valueFontHeight
-                },
-                option: option,
-                theme: chartsTheme.echartsTheme,
-                renderer: "svg"
-            })
-        ]
-    });
-};
-const SeriesName = styled(Typography, {
-    shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
-})(({ theme, padding, fontSize })=>({
-        color: theme.palette.text.secondary,
-        padding: `${padding}px`,
-        fontSize: `${fontSize}px`,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-    }));
-const Value = styled(Typography, {
-    shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
-})(({ theme, color, padding, fontSize, sparkline })=>({
-        color: color ?? theme.palette.text.primary,
-        fontSize: `${fontSize}px`,
-        padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
-        whiteSpace: 'nowrap',
-        lineHeight: LINE_HEIGHT
-    }));
-
-//# sourceMappingURL=StatChart.js.map