@perses-dev/components 0.45.0 → 0.46.0-rc0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FormatOptions } from '@perses-dev/core';
|
|
2
2
|
import { LineSeriesOption } from 'echarts/charts';
|
|
3
|
-
import { GraphSeries } from '../model
|
|
3
|
+
import { GraphSeries } from '../model';
|
|
4
4
|
import { FontSizeOption } from '../FontSizeSelector';
|
|
5
5
|
export interface StatChartData {
|
|
6
6
|
calculatedValue?: number | null;
|
|
@@ -10,7 +10,7 @@ export interface StatChartProps {
|
|
|
10
10
|
width: number;
|
|
11
11
|
height: number;
|
|
12
12
|
data: StatChartData;
|
|
13
|
-
format
|
|
13
|
+
format?: FormatOptions;
|
|
14
14
|
color?: string;
|
|
15
15
|
sparkline?: LineSeriesOption;
|
|
16
16
|
showSeriesName?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAI9D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAI9D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,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,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,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,2CAoI9C"}
|
|
@@ -19,7 +19,7 @@ import { use } from 'echarts/core';
|
|
|
19
19
|
import { LineChart as EChartsLineChart } from 'echarts/charts';
|
|
20
20
|
import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
|
|
21
21
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
22
|
-
import { useChartsTheme } from '../context
|
|
22
|
+
import { useChartsTheme } from '../context';
|
|
23
23
|
import { EChart } from '../EChart';
|
|
24
24
|
import { useOptimalFontSize } from './calculateFontSize';
|
|
25
25
|
use([
|
|
@@ -1 +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, FormatOptions } 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/ChartsProvider';\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 format: FormatOptions;\n color?: string;\n sparkline?: LineSeriesOption;\n showSeriesName?: boolean;\n valueFontSize?: FontSizeOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n const { width, height, data, format, 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, format);\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 percent-decimal 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","format","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":"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,OAAO,QAAQ,QAAQ;AAChC,SAASC,WAAW,QAAuB,mBAAmB;AAC9D,SAASC,GAAG,EAAEC,UAAU,EAAEC,MAAM,QAAQ,gBAAgB;AACxD,OAAOC,WAAW,eAAe;AACjC,SAASC,GAAG,QAA2B,eAAe;AACtD,SAASC,aAAaC,gBAAgB,QAA0B,iBAAiB;AACjF,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,qBAAqB;AACvG,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,MAAM,QAAQ,YAAY;AAGnC,SAASC,kBAAkB,QAAQ,sBAAsB;AAEzDV,IAAI;IAACE;IAAkBC;IAAeC;IAAkBC;IAAgBC;IAAkBC;CAAe;AAEzG,MAAMI,cAAc;AACpB,MAAMC,4BAA4B;AAClC,MAAMC,0BAA0B;AAChC,MAAMC,oBAAoB;AAkB1B,OAAO,SAASC,UAAUC,KAAqB;QAerCC,kBAkGCA;IAhHT,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEF,IAAI,EAAEG,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,cAAc,EAAEC,aAAa,EAAE,GAAGR;IACzF,MAAMS,cAAcjB;IAEpB,IAAIkB,iBAAiB;IACrB,IAAIT,KAAKU,eAAe,KAAK,MAAM;QACjCD,iBAAiB;IACnB,OAAO,IAAI,OAAOT,KAAKU,eAAe,KAAK,UAAU;QACnDD,iBAAiB/B,YAAYsB,KAAKU,eAAe,EAAEP;IACrD;IAEA,MAAMQ,mBAAmBH,YAAYI,SAAS,CAACC,OAAO,CAACC,OAAO;QAItDd;IAFR,6CAA6C;IAC7C,IAAIe,qBAAqBtB,mBAAmB;QAC1CuB,MAAMhB,CAAAA,wBAAAA,iBAAAA,4BAAAA,mBAAAA,KAAMiB,UAAU,cAAhBjB,uCAAAA,iBAAkBkB,IAAI,cAAtBlB,mCAAAA,wBAA0B;QAChCmB,YAAYvB;QACZK;QACAC,QAAQA,SAAS;QACjBkB,YAAY1B;QACZ2B,SAAS1B;IACX;IACA,MAAM2B,mBAAmBhB,iBAAiBS,qBAAqBrB,cAAciB,mBAAmB;IAEhG,uCAAuC;IACvC,MAAMY,iBAAiBtB,QAAQU,mBAAmB;IAClD,MAAMa,kBAAkBtB,SAASoB;IACjC,MAAMG,uBAAuBhC,mBAAmB;QAC9CuB,MAAMP;QACN,4DAA4D;QAC5DiB,kBAAkBnB;QAClBY,YAAYtB;QACZ,4FAA4F;QAC5FI,OAAOI,YAAYkB,iBAAiBA,iBAAiB;QACrD,2EAA2E;QAC3E,iEAAiE;QACjErB,QAAQG,YAAYmB,kBAAkB,OAAOA,kBAAkB;QAC/DJ,YAAY1B;IACd;IACA,MAAMiC,kBAAkBF,uBAAuB/B;IAE/C,+EAA+E;IAC/EqB,qBAAqBa,KAAKC,GAAG,CAACJ,uBAAuB,KAAKV;IAE1D,MAAMe,SAA4BrD,QAAQ;QACxC,IAAIuB,KAAKiB,UAAU,KAAKc,WAAW,OAAOvB,YAAYwB,YAAY;QAElE,MAAMC,SAASjC,KAAKiB,UAAU;QAC9B,MAAMiB,aAAiC,EAAE;QAEzC,IAAI7B,cAAc0B,WAAW;YAC3B,MAAMI,aAAa;gBACjBC,MAAM;gBACNlB,MAAMe,OAAOf,IAAI;gBACjBlB,MAAMiC,OAAOI,MAAM;gBACnBC,QAAQ;gBACRC,QAAQ;gBACRC,WAAW;gBACXC,QAAQ;YACV;YACA,MAAMC,eAAe5D,MAAMqD,YAAY9B;YACvC6B,WAAWS,IAAI,CAACD;QAClB;QAEA,MAAMZ,SAAS;YACbc,OAAO;gBACLC,MAAM;YACR;YACAC,MAAM;gBACJD,MAAM;gBACNE,KAAK;gBACLC,OAAO;gBACPC,QAAQ;gBACRC,MAAM;gBACNC,cAAc;YAChB;YACAC,OAAO;gBACLhB,MAAM;gBACNS,MAAM;gBACNQ,aAAa;YACf;YACAC,OAAO;gBACLlB,MAAM;gBACNS,MAAM;gBACNhB,KAAK,CAAC0B;oBACJ,IAAIA,MAAM1B,GAAG,IAAI,KAAK0B,MAAM1B,GAAG,IAAI,GAAG;wBACpC,4EAA4E;wBAC5E,OAAO;oBACT;oBACA,OAAO0B,MAAM1B,GAAG;gBAClB;YACF;YACA2B,SAAS;gBACPX,MAAM;YACR;YACAZ,QAAQC;QACV;QAEA,OAAOJ;IACT,GAAG;QAAC9B;QAAMQ;QAAaH;KAAU;IAEjC,MAAMoD,gBAAgBpD,YAAY,SAAS;IAC3C,MAAMqD,aAAa;QACjBC,SAAS;QACTC,eAAe;QACfC,gBAAgBJ;QAChBK,YAAYL;IACd;IAEA,qBACE,MAAC9E;QAAIoF,IAAI;YAAE7D,QAAQ;YAAQD,OAAO;YAAQ,GAAGyD,UAAU;QAAC;;YACrDpD,gCACC,KAAC0D;gBAAWnD,SAASF;gBAAkBsD,UAAUlD;2BAC9Cf,oBAAAA,KAAKiB,UAAU,cAAfjB,wCAAAA,kBAAiBkB,IAAI;;0BAG1B,KAACgD;gBAAMC,SAAQ;gBAAK/D,OAAOA;gBAAO6D,UAAUxC;gBAAsBZ,SAASF;0BACxEF;;YAEFJ,cAAc0B,2BACb,KAACvC;gBACCuE,IAAI;oBACF9D,OAAO;oBACPC,QAAQA,SAASoB,mBAAmBK;gBACtC;gBACAG,QAAQA;gBACRsC,OAAO5D,YAAY6D,YAAY;gBAC/BC,UAAS;;;;AAKnB;AAEA,MAAMN,aAAanF,OAAOD,YAAY;IACpC2F,mBAAmB,CAACC,OAASA,SAAS,aAAaA,SAAS;AAC9D,GAAoE,CAAC,EAAEJ,KAAK,EAAEvD,OAAO,EAAEoD,QAAQ,EAAE,GAAM,CAAA;QACrG7D,OAAOgE,MAAMK,OAAO,CAACzD,IAAI,CAAC0D,SAAS;QACnC7D,SAAS,CAAC,EAAEA,QAAQ,EAAE,CAAC;QACvBoD,UAAU,CAAC,EAAEA,SAAS,EAAE,CAAC;QACzBU,UAAU;QACVC,cAAc;QACdC,YAAY;IACd,CAAA;AAEA,MAAMX,QAAQrF,OAAOD,YAAY;IAC/B2F,mBAAmB,CAACC,OAASA,SAAS,WAAWA,SAAS,aAAaA,SAAS,cAAcA,SAAS;AACzG,GACE,CAAC,EAAEJ,KAAK,EAAEhE,KAAK,EAAES,OAAO,EAAEoD,QAAQ,EAAE5D,SAAS,EAAE,GAAM,CAAA;QACnDD,OAAOA,kBAAAA,mBAAAA,QAASgE,MAAMK,OAAO,CAACzD,IAAI,CAAC8D,OAAO;QAC1Cb,UAAU,CAAC,EAAEA,SAAS,EAAE,CAAC;QACzBpD,SAASR,YAAY,CAAC,EAAEQ,QAAQ,GAAG,EAAEA,QAAQ,KAAK,EAAEA,QAAQ,EAAE,CAAC,GAAG,CAAC,GAAG,EAAEA,QAAQ,EAAE,CAAC;QACnFgE,YAAY;QACZzD,YAAY1B;IACd,CAAA"}
|
|
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, FormatOptions } 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';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model';\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 format?: FormatOptions;\n color?: string;\n sparkline?: LineSeriesOption;\n showSeriesName?: boolean;\n valueFontSize?: FontSizeOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n const { width, height, data, format, 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, format);\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 percent-decimal 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","format","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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"}
|
|
@@ -29,7 +29,7 @@ const _core1 = require("echarts/core");
|
|
|
29
29
|
const _charts = require("echarts/charts");
|
|
30
30
|
const _components = require("echarts/components");
|
|
31
31
|
const _renderers = require("echarts/renderers");
|
|
32
|
-
const
|
|
32
|
+
const _context = require("../context");
|
|
33
33
|
const _EChart = require("../EChart");
|
|
34
34
|
const _calculateFontSize = require("./calculateFontSize");
|
|
35
35
|
function _interop_require_default(obj) {
|
|
@@ -52,7 +52,7 @@ const VALUE_FONT_WEIGHT = 700;
|
|
|
52
52
|
function StatChart(props) {
|
|
53
53
|
var _data_seriesData, _data_seriesData1;
|
|
54
54
|
const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;
|
|
55
|
-
const chartsTheme = (0,
|
|
55
|
+
const chartsTheme = (0, _context.useChartsTheme)();
|
|
56
56
|
let formattedValue = '';
|
|
57
57
|
if (data.calculatedValue === null) {
|
|
58
58
|
formattedValue = 'null';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@perses-dev/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.46.0-rc0",
|
|
4
4
|
"description": "Common UI components used across Perses features",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/perses/perses/blob/main/README.md",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@codemirror/lang-json": "^6.0.1",
|
|
37
37
|
"@fontsource/lato": "^4.5.10",
|
|
38
38
|
"@mui/x-date-pickers": "^6.12.1",
|
|
39
|
-
"@perses-dev/core": "0.
|
|
39
|
+
"@perses-dev/core": "0.46.0-rc0",
|
|
40
40
|
"@tanstack/react-table": "^8.9.1",
|
|
41
41
|
"@uiw/react-codemirror": "^4.19.1",
|
|
42
42
|
"date-fns": "^2.28.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"react-virtuoso": "^4.3.6"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@perses-dev/storybook": "0.
|
|
55
|
+
"@perses-dev/storybook": "0.46.0-rc0"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@mui/material": "^5.10.0",
|