@perses-dev/components 0.22.0 → 0.23.1

package/dist/cjs/test-utils/theme.js

@@ -24,5 +24,10 @@ const testChartsTheme = {
     sparkline: {
         width: 1,
         color: '#000000'
+    },
+    container: {
+        padding: {
+            default: 12
+        }
     }
 };

package/dist/cjs/utils/theme-gen.js

@@ -183,6 +183,11 @@ function generateChartsTheme(muiTheme, echartsTheme) {
         sparkline: {
             width: 2,
             color: '#1976d2'
+        },
+        container: {
+            padding: {
+                default: parseInt(muiTheme.spacing(1.5), 10)
+            }
         }
     };
 }

package/dist/cjs/utils/theme-gen.test.js

@@ -33,6 +33,11 @@ describe('generateChartsTheme', ()=>{
     it('should return perses specific charts theme from converted MUI theme', ()=>{
         expect(chartsTheme).toMatchInlineSnapshot(`
       Object {
+        "container": Object {
+          "padding": Object {
+            "default": 12,
+          },
+        },
         "echartsTheme": Object {
           "bar": Object {
             "barMaxWidth": 150,

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './DateTimeRangePicker';
+export * from './Dialog';
 export * from './Drawer';
 export * from './EChart';
 export * from './ErrorAlert';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './DateTimeRangePicker';
+export * from './Dialog';
 export * from './Drawer';
 export * from './EChart';
 export * from './ErrorAlert';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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 './DateTimeRangePicker';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LegendOptionsEditor';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\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,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../src/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 './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LegendOptionsEditor';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\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,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/model/theme.d.ts

@@ -6,6 +6,17 @@ export interface PersesChartsTheme {
         width: number;
         color: string;
     };
+    /**
+     * Theming for the container that wraps a chart.
+     */
+    container: {
+        /**
+         * Padding in pixels.
+         */
+        padding: {
+            default: number;
+        };
+    };
 }
 export interface EChartsTheme extends EChartsOption {
     bar?: BarSeriesOption;

package/dist/model/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/model/theme.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEtH,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,iBAAiB,CAAC;IAChC,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAGD,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/model/theme.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEtH,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,iBAAiB,CAAC;IAChC,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,SAAS,EAAE;QACT;;WAEG;QACH,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;CACH;AAGD,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B"}

package/dist/model/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/theme.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\nimport type { EChartsOption, EChartsCoreOption, BarSeriesOption, LineSeriesOption, GaugeSeriesOption } from 'echarts';\n\nexport interface PersesChartsTheme {\n  echartsTheme: EChartsTheme;\n  noDataOption: EChartsCoreOption;\n  sparkline: {\n    width: number;\n    color: string;\n  };\n}\n\n// https://github.com/apache/echarts/issues/12489#issuecomment-643185207\nexport interface EChartsTheme extends EChartsOption {\n  bar?: BarSeriesOption;\n  line?: LineSeriesOption;\n  gauge?: GaugeSeriesOption;\n}\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,WAgBC"}
+{"version":3,"sources":["../../src/model/theme.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\nimport type { EChartsOption, EChartsCoreOption, BarSeriesOption, LineSeriesOption, GaugeSeriesOption } from 'echarts';\n\nexport interface PersesChartsTheme {\n  echartsTheme: EChartsTheme;\n  noDataOption: EChartsCoreOption;\n  sparkline: {\n    width: number;\n    color: string;\n  };\n  /**\n   * Theming for the container that wraps a chart.\n   */\n  container: {\n    /**\n     * Padding in pixels.\n     */\n    padding: {\n      default: number;\n    };\n  };\n}\n\n// https://github.com/apache/echarts/issues/12489#issuecomment-643185207\nexport interface EChartsTheme extends EChartsOption {\n  bar?: BarSeriesOption;\n  line?: LineSeriesOption;\n  gauge?: GaugeSeriesOption;\n}\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,WA2BC"}

package/dist/model/units/decimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decimal.d.ts","sourceRoot":"","sources":["../../../src/model/units/decimal.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD,QAAA,MAAM,gBAAgB,sBAAuB,CAAC;AAC9C,aAAK,eAAe,GAAG,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACvD,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,eAAe,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,eAAO,MAAM,oBAAoB,EAAE,eAGlC,CAAC;AACF,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,UAAU,CAAC,CAK7E,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,GAAG,MAAM,CAepF;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAI,UAG9D;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAYlF"}
+{"version":3,"file":"decimal.d.ts","sourceRoot":"","sources":["../../../src/model/units/decimal.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD,QAAA,MAAM,gBAAgB,sBAAuB,CAAC;AAC9C,aAAK,eAAe,GAAG,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACvD,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,eAAe,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,eAAO,MAAM,oBAAoB,EAAE,eAGlC,CAAC;AACF,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,UAAU,CAAC,CAK7E,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,GAAG,MAAM,CAmBpF;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAI,UAG9D;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAYlF"}

package/dist/model/units/decimal.js

@@ -28,7 +28,10 @@ export const DECIMAL_UNIT_CONFIG = {
 export function formatDecimal(value, unitOptions) {
     var _decimal_places;
     const decimals = (_decimal_places = unitOptions.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : DEFAULT_DECIMAL_PLACES;
-    if (unitOptions.abbreviate === true) {
+    if (value === 0) {
+        return value.toString();
+    }
+    if (unitOptions.abbreviate && value >= 1000) {
         return abbreviateLargeNumber(value, decimals);
     }
     const formatParams = {

package/dist/model/units/decimal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/model/units/decimal.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\nimport { round } from '../../utils/mathjs';\nimport { DEFAULT_DECIMAL_PLACES } from './constants';\nimport { UnitGroupConfig, UnitConfig } from './types';\n\nconst decimalUnitKinds = ['Decimal'] as const;\ntype DecimalUnitKind = typeof decimalUnitKinds[number];\nexport type DecimalUnitOptions = {\n  kind: DecimalUnitKind;\n  decimal_places?: number;\n  abbreviate?: boolean;\n};\nexport const PERCENT_GROUP_CONFIG: UnitGroupConfig = {\n  label: 'Percent',\n  decimal_places: true,\n};\nexport const DECIMAL_UNIT_CONFIG: Readonly<Record<DecimalUnitKind, UnitConfig>> = {\n  Decimal: {\n    group: 'Decimal',\n    label: 'Decimal',\n  },\n};\n\nexport function formatDecimal(value: number, unitOptions: DecimalUnitOptions): string {\n  const decimals = unitOptions.decimal_places ?? DEFAULT_DECIMAL_PLACES;\n\n  if (unitOptions.abbreviate === true) {\n    return abbreviateLargeNumber(value, decimals);\n  }\n\n  const formatParams: Intl.NumberFormatOptions = {\n    style: 'decimal',\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n    useGrouping: true,\n  };\n  const decimalFormatter = new Intl.NumberFormat('en-US', formatParams);\n  return decimalFormatter.format(value);\n}\n\n/**\n * Takes large numbers and abbreviates them with the appropriate suffix\n * 10123 -> 10.123k\n * 1000000 -> 1M\n */\nexport function abbreviateLargeNumber(num: number, decimals = 2) {\n  const modifier = (n: number) => round(n, decimals);\n  return formatNumber(num, modifier);\n}\n\n/**\n * Takes large numbers, rounds and abbreviates them with the appropriate suffix\n * Add modifier to run on output value prior to unit being added (defaults to rounding)\n */\nexport function formatNumber(num: number, modifier?: (n: number) => number): string {\n  const fn = modifier ?? Math.round;\n\n  return num >= 1e12\n    ? fn(num / 1e12) + 'T'\n    : num >= 1e9\n    ? fn(num / 1e9) + 'B'\n    : num >= 1e6\n    ? fn(num / 1e6) + 'M'\n    : num >= 1e3\n    ? fn(num / 1e3) + 'K'\n    : num.toString();\n}\n"],"names":["round","DEFAULT_DECIMAL_PLACES","decimalUnitKinds","PERCENT_GROUP_CONFIG","label","decimal_places","DECIMAL_UNIT_CONFIG","Decimal","group","formatDecimal","value","unitOptions","decimals","abbreviate","abbreviateLargeNumber","formatParams","style","minimumFractionDigits","maximumFractionDigits","useGrouping","decimalFormatter","Intl","NumberFormat","format","num","modifier","n","formatNumber","fn","Math","toString"],"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,KAAK,QAAQ,oBAAoB,CAAC;AAC3C,SAASC,sBAAsB,QAAQ,aAAa,CAAC;AAGrD,MAAMC,gBAAgB,GAAG;IAAC,SAAS;CAAC,AAAS,AAAC;AAO9C,OAAO,MAAMC,oBAAoB,GAAoB;IACnDC,KAAK,EAAE,SAAS;IAChBC,cAAc,EAAE,IAAI;CACrB,CAAC;AACF,OAAO,MAAMC,mBAAmB,GAAkD;IAChFC,OAAO,EAAE;QACPC,KAAK,EAAE,SAAS;QAChBJ,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF,OAAO,SAASK,aAAa,CAACC,KAAa,EAAEC,WAA+B,EAAU;QACnEA,eAA0B;IAA3C,MAAMC,QAAQ,GAAGD,CAAAA,eAA0B,GAA1BA,WAAW,CAACN,cAAc,cAA1BM,eAA0B,cAA1BA,eAA0B,GAAIV,sBAAsB,AAAC;IAEtE,IAAIU,WAAW,CAACE,UAAU,KAAK,IAAI,EAAE;QACnC,OAAOC,qBAAqB,CAACJ,KAAK,EAAEE,QAAQ,CAAC,CAAC;IAChD,CAAC;IAED,MAAMG,YAAY,GAA6B;QAC7CC,KAAK,EAAE,SAAS;QAChBC,qBAAqB,EAAEL,QAAQ;QAC/BM,qBAAqB,EAAEN,QAAQ;QAC/BO,WAAW,EAAE,IAAI;KAClB,AAAC;IACF,MAAMC,gBAAgB,GAAG,IAAIC,IAAI,CAACC,YAAY,CAAC,OAAO,EAAEP,YAAY,CAAC,AAAC;IACtE,OAAOK,gBAAgB,CAACG,MAAM,CAACb,KAAK,CAAC,CAAC;AACxC,CAAC;AAED;;;;CAIC,GACD,OAAO,SAASI,qBAAqB,CAACU,GAAW,EAAEZ,QAAQ,GAAG,CAAC,EAAE;IAC/D,MAAMa,QAAQ,GAAG,CAACC,CAAS,GAAK1B,KAAK,CAAC0B,CAAC,EAAEd,QAAQ,CAAC,AAAC;IACnD,OAAOe,YAAY,CAACH,GAAG,EAAEC,QAAQ,CAAC,CAAC;AACrC,CAAC;AAED;;;CAGC,GACD,OAAO,SAASE,YAAY,CAACH,GAAW,EAAEC,QAAgC,EAAU;IAClF,MAAMG,EAAE,GAAGH,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAII,IAAI,CAAC7B,KAAK,AAAC;IAElC,OAAOwB,GAAG,IAAI,IAAI,GACdI,EAAE,CAACJ,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GACpBA,GAAG,IAAI,GAAG,GACVI,EAAE,CAACJ,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GACnBA,GAAG,IAAI,GAAG,GACVI,EAAE,CAACJ,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GACnBA,GAAG,IAAI,GAAG,GACVI,EAAE,CAACJ,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GACnBA,GAAG,CAACM,QAAQ,EAAE,CAAC;AACrB,CAAC"}
+{"version":3,"sources":["../../../src/model/units/decimal.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\nimport { round } from '../../utils/mathjs';\nimport { DEFAULT_DECIMAL_PLACES } from './constants';\nimport { UnitGroupConfig, UnitConfig } from './types';\n\nconst decimalUnitKinds = ['Decimal'] as const;\ntype DecimalUnitKind = typeof decimalUnitKinds[number];\nexport type DecimalUnitOptions = {\n  kind: DecimalUnitKind;\n  decimal_places?: number;\n  abbreviate?: boolean;\n};\nexport const PERCENT_GROUP_CONFIG: UnitGroupConfig = {\n  label: 'Percent',\n  decimal_places: true,\n};\nexport const DECIMAL_UNIT_CONFIG: Readonly<Record<DecimalUnitKind, UnitConfig>> = {\n  Decimal: {\n    group: 'Decimal',\n    label: 'Decimal',\n  },\n};\n\nexport function formatDecimal(value: number, unitOptions: DecimalUnitOptions): string {\n  const decimals = unitOptions.decimal_places ?? DEFAULT_DECIMAL_PLACES;\n\n  if (value === 0) {\n    return value.toString();\n  }\n\n  if (unitOptions.abbreviate && value >= 1000) {\n    return abbreviateLargeNumber(value, decimals);\n  }\n\n  const formatParams: Intl.NumberFormatOptions = {\n    style: 'decimal',\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n    useGrouping: true,\n  };\n  const decimalFormatter = new Intl.NumberFormat('en-US', formatParams);\n  return decimalFormatter.format(value);\n}\n\n/**\n * Takes large numbers and abbreviates them with the appropriate suffix\n * 10123 -> 10.123k\n * 1000000 -> 1M\n */\nexport function abbreviateLargeNumber(num: number, decimals = 2) {\n  const modifier = (n: number) => round(n, decimals);\n  return formatNumber(num, modifier);\n}\n\n/**\n * Takes large numbers, rounds and abbreviates them with the appropriate suffix\n * Add modifier to run on output value prior to unit being added (defaults to rounding)\n */\nexport function formatNumber(num: number, modifier?: (n: number) => number): string {\n  const fn = modifier ?? Math.round;\n\n  return num >= 1e12\n    ? fn(num / 1e12) + 'T'\n    : num >= 1e9\n    ? fn(num / 1e9) + 'B'\n    : num >= 1e6\n    ? fn(num / 1e6) + 'M'\n    : num >= 1e3\n    ? fn(num / 1e3) + 'K'\n    : num.toString();\n}\n"],"names":["round","DEFAULT_DECIMAL_PLACES","decimalUnitKinds","PERCENT_GROUP_CONFIG","label","decimal_places","DECIMAL_UNIT_CONFIG","Decimal","group","formatDecimal","value","unitOptions","decimals","toString","abbreviate","abbreviateLargeNumber","formatParams","style","minimumFractionDigits","maximumFractionDigits","useGrouping","decimalFormatter","Intl","NumberFormat","format","num","modifier","n","formatNumber","fn","Math"],"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,KAAK,QAAQ,oBAAoB,CAAC;AAC3C,SAASC,sBAAsB,QAAQ,aAAa,CAAC;AAGrD,MAAMC,gBAAgB,GAAG;IAAC,SAAS;CAAC,AAAS,AAAC;AAO9C,OAAO,MAAMC,oBAAoB,GAAoB;IACnDC,KAAK,EAAE,SAAS;IAChBC,cAAc,EAAE,IAAI;CACrB,CAAC;AACF,OAAO,MAAMC,mBAAmB,GAAkD;IAChFC,OAAO,EAAE;QACPC,KAAK,EAAE,SAAS;QAChBJ,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF,OAAO,SAASK,aAAa,CAACC,KAAa,EAAEC,WAA+B,EAAU;QACnEA,eAA0B;IAA3C,MAAMC,QAAQ,GAAGD,CAAAA,eAA0B,GAA1BA,WAAW,CAACN,cAAc,cAA1BM,eAA0B,cAA1BA,eAA0B,GAAIV,sBAAsB,AAAC;IAEtE,IAAIS,KAAK,KAAK,CAAC,EAAE;QACf,OAAOA,KAAK,CAACG,QAAQ,EAAE,CAAC;IAC1B,CAAC;IAED,IAAIF,WAAW,CAACG,UAAU,IAAIJ,KAAK,IAAI,IAAI,EAAE;QAC3C,OAAOK,qBAAqB,CAACL,KAAK,EAAEE,QAAQ,CAAC,CAAC;IAChD,CAAC;IAED,MAAMI,YAAY,GAA6B;QAC7CC,KAAK,EAAE,SAAS;QAChBC,qBAAqB,EAAEN,QAAQ;QAC/BO,qBAAqB,EAAEP,QAAQ;QAC/BQ,WAAW,EAAE,IAAI;KAClB,AAAC;IACF,MAAMC,gBAAgB,GAAG,IAAIC,IAAI,CAACC,YAAY,CAAC,OAAO,EAAEP,YAAY,CAAC,AAAC;IACtE,OAAOK,gBAAgB,CAACG,MAAM,CAACd,KAAK,CAAC,CAAC;AACxC,CAAC;AAED;;;;CAIC,GACD,OAAO,SAASK,qBAAqB,CAACU,GAAW,EAAEb,QAAQ,GAAG,CAAC,EAAE;IAC/D,MAAMc,QAAQ,GAAG,CAACC,CAAS,GAAK3B,KAAK,CAAC2B,CAAC,EAAEf,QAAQ,CAAC,AAAC;IACnD,OAAOgB,YAAY,CAACH,GAAG,EAAEC,QAAQ,CAAC,CAAC;AACrC,CAAC;AAED;;;CAGC,GACD,OAAO,SAASE,YAAY,CAACH,GAAW,EAAEC,QAAgC,EAAU;IAClF,MAAMG,EAAE,GAAGH,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAII,IAAI,CAAC9B,KAAK,AAAC;IAElC,OAAOyB,GAAG,IAAI,IAAI,GACdI,EAAE,CAACJ,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,GACpBA,GAAG,IAAI,GAAG,GACVI,EAAE,CAACJ,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GACnBA,GAAG,IAAI,GAAG,GACVI,EAAE,CAACJ,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GACnBA,GAAG,IAAI,GAAG,GACVI,EAAE,CAACJ,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GACnBA,GAAG,CAACZ,QAAQ,EAAE,CAAC;AACrB,CAAC"}

package/dist/model/units/units.test.js

@@ -28,6 +28,60 @@ describe('formatValue', ()=>{
             },
             expected: '155,900.0000'
         },
+        {
+            value: 1000,
+            unit: {
+                kind: 'Decimal',
+                decimal_places: 2,
+                abbreviate: true
+            },
+            expected: '1K'
+        },
+        {
+            value: 1590.878787,
+            unit: {
+                kind: 'Decimal',
+                decimal_places: 3,
+                abbreviate: true
+            },
+            expected: '1.591K'
+        },
+        {
+            value: 0.123456789,
+            unit: {
+                kind: 'Decimal',
+                decimal_places: 2,
+                abbreviate: true
+            },
+            expected: '0.12'
+        },
+        {
+            value: 0.123456789,
+            unit: {
+                kind: 'Decimal',
+                decimal_places: 4,
+                abbreviate: false
+            },
+            expected: '0.1235'
+        },
+        {
+            value: -0.123456789,
+            unit: {
+                kind: 'Decimal',
+                decimal_places: 3,
+                abbreviate: true
+            },
+            expected: '-0.123'
+        },
+        {
+            value: 0,
+            unit: {
+                kind: 'Decimal',
+                decimal_places: 2,
+                abbreviate: true
+            },
+            expected: '0'
+        },
         {
             value: 10,
             unit: {

package/dist/model/units/units.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/model/units/units.test.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\nimport { formatValue, UnitOptions } from './units';\n\ninterface UnitTestCase {\n  value: number;\n  unit: UnitOptions;\n  expected: string;\n}\n\ndescribe('formatValue', () => {\n  const tests: UnitTestCase[] = [\n    {\n      value: 100000,\n      unit: { kind: 'Decimal' },\n      expected: '100,000.00',\n    },\n    {\n      value: 155900,\n      unit: { kind: 'Decimal', decimal_places: 4 },\n      expected: '155,900.0000',\n    },\n    {\n      value: 10,\n      unit: { kind: 'Percent' },\n      expected: '10.00%',\n    },\n    {\n      value: 50,\n      unit: { kind: 'Percent', decimal_places: 0 },\n      expected: '50%',\n    },\n    {\n      value: 0.1,\n      unit: { kind: 'PercentDecimal' },\n      expected: '10.00%',\n    },\n    {\n      value: 100,\n      unit: { kind: 'Bytes', decimal_places: 0, abbreviate: false },\n      expected: '100 bytes',\n    },\n    {\n      value: 100,\n      unit: { kind: 'Bytes', decimal_places: -1, abbreviate: false },\n      expected: '100 bytes',\n    },\n    {\n      value: 225000,\n      unit: { kind: 'Bytes', decimal_places: 0, abbreviate: true },\n      expected: '220 KB',\n    },\n    {\n      value: 505200,\n      unit: { kind: 'Bytes' },\n      expected: '505,200.00 bytes',\n    },\n    {\n      value: 8000,\n      unit: { kind: 'Milliseconds' },\n      expected: '8,000.00 milliseconds',\n    },\n    {\n      value: 200900,\n      unit: { kind: 'Seconds' },\n      expected: '200,900.00 seconds',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Minutes' },\n      expected: '300.00 minutes',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Hours' },\n      expected: '300.00 hours',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Days' },\n      expected: '300.00 days',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Weeks' },\n      expected: '300.00 weeks',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Months' },\n      expected: '300.00 months',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Years' },\n      expected: '300.00 years',\n    },\n  ];\n  it.each(tests)('returns $expected when $value formatted as $unit', (args: UnitTestCase) => {\n    const { value, unit, expected } = args;\n    expect(formatValue(value, unit)).toEqual(expected);\n  });\n});\n"],"names":["formatValue","describe","tests","value","unit","kind","expected","decimal_places","abbreviate","it","each","args","expect","toEqual"],"mappings":"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"}
+{"version":3,"sources":["../../../src/model/units/units.test.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\nimport { formatValue, UnitOptions } from './units';\n\ninterface UnitTestCase {\n  value: number;\n  unit: UnitOptions;\n  expected: string;\n}\n\ndescribe('formatValue', () => {\n  const tests: UnitTestCase[] = [\n    {\n      value: 100000,\n      unit: { kind: 'Decimal' },\n      expected: '100,000.00',\n    },\n    {\n      value: 155900,\n      unit: { kind: 'Decimal', decimal_places: 4 },\n      expected: '155,900.0000',\n    },\n    {\n      value: 1000,\n      unit: { kind: 'Decimal', decimal_places: 2, abbreviate: true },\n      expected: '1K',\n    },\n    {\n      value: 1590.878787,\n      unit: { kind: 'Decimal', decimal_places: 3, abbreviate: true },\n      expected: '1.591K',\n    },\n    {\n      value: 0.123456789,\n      unit: { kind: 'Decimal', decimal_places: 2, abbreviate: true },\n      expected: '0.12',\n    },\n    {\n      value: 0.123456789,\n      unit: { kind: 'Decimal', decimal_places: 4, abbreviate: false },\n      expected: '0.1235',\n    },\n    {\n      value: -0.123456789,\n      unit: { kind: 'Decimal', decimal_places: 3, abbreviate: true },\n      expected: '-0.123',\n    },\n    {\n      value: 0,\n      unit: { kind: 'Decimal', decimal_places: 2, abbreviate: true },\n      expected: '0',\n    },\n    {\n      value: 10,\n      unit: { kind: 'Percent' },\n      expected: '10.00%',\n    },\n    {\n      value: 50,\n      unit: { kind: 'Percent', decimal_places: 0 },\n      expected: '50%',\n    },\n    {\n      value: 0.1,\n      unit: { kind: 'PercentDecimal' },\n      expected: '10.00%',\n    },\n    {\n      value: 100,\n      unit: { kind: 'Bytes', decimal_places: 0, abbreviate: false },\n      expected: '100 bytes',\n    },\n    {\n      value: 100,\n      unit: { kind: 'Bytes', decimal_places: -1, abbreviate: false },\n      expected: '100 bytes',\n    },\n    {\n      value: 225000,\n      unit: { kind: 'Bytes', decimal_places: 0, abbreviate: true },\n      expected: '220 KB',\n    },\n    {\n      value: 505200,\n      unit: { kind: 'Bytes' },\n      expected: '505,200.00 bytes',\n    },\n    {\n      value: 8000,\n      unit: { kind: 'Milliseconds' },\n      expected: '8,000.00 milliseconds',\n    },\n    {\n      value: 200900,\n      unit: { kind: 'Seconds' },\n      expected: '200,900.00 seconds',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Minutes' },\n      expected: '300.00 minutes',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Hours' },\n      expected: '300.00 hours',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Days' },\n      expected: '300.00 days',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Weeks' },\n      expected: '300.00 weeks',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Months' },\n      expected: '300.00 months',\n    },\n    {\n      value: 300,\n      unit: { kind: 'Years' },\n      expected: '300.00 years',\n    },\n  ];\n  it.each(tests)('returns $expected when $value formatted as $unit', (args: UnitTestCase) => {\n    const { value, unit, expected } = args;\n    expect(formatValue(value, unit)).toEqual(expected);\n  });\n});\n"],"names":["formatValue","describe","tests","value","unit","kind","expected","decimal_places","abbreviate","it","each","args","expect","toEqual"],"mappings":"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"}

package/dist/test-utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/test-utils/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,eAAe,EAAE,iBAO7B,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/test-utils/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,eAAe,EAAE,iBAY7B,CAAC"}

package/dist/test-utils/theme.js

@@ -16,6 +16,11 @@ export const testChartsTheme = {
     sparkline: {
         width: 1,
         color: '#000000'
+    },
+    container: {
+        padding: {
+            default: 12
+        }
     }
 };
 

package/dist/test-utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/theme.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\nimport { PersesChartsTheme } from '../model';\n\nexport const testChartsTheme: PersesChartsTheme = {\n  echartsTheme: {},\n  noDataOption: {},\n  sparkline: {\n    width: 1,\n    color: '#000000',\n  },\n};\n"],"names":["testChartsTheme","echartsTheme","noDataOption","sparkline","width","color"],"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;AAIjC,OAAO,MAAMA,eAAe,GAAsB;IAChDC,YAAY,EAAE,EAAE;IAChBC,YAAY,EAAE,EAAE;IAChBC,SAAS,EAAE;QACTC,KAAK,EAAE,CAAC;QACRC,KAAK,EAAE,SAAS;KACjB;CACF,CAAC"}
+{"version":3,"sources":["../../src/test-utils/theme.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\nimport { PersesChartsTheme } from '../model';\n\nexport const testChartsTheme: PersesChartsTheme = {\n  echartsTheme: {},\n  noDataOption: {},\n  sparkline: {\n    width: 1,\n    color: '#000000',\n  },\n  container: {\n    padding: {\n      default: 12,\n    },\n  },\n};\n"],"names":["testChartsTheme","echartsTheme","noDataOption","sparkline","width","color","container","padding","default"],"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;AAIjC,OAAO,MAAMA,eAAe,GAAsB;IAChDC,YAAY,EAAE,EAAE;IAChBC,YAAY,EAAE,EAAE;IAChBC,SAAS,EAAE;QACTC,KAAK,EAAE,CAAC;QACRC,KAAK,EAAE,SAAS;KACjB;IACDC,SAAS,EAAE;QACTC,OAAO,EAAE;YACPC,OAAO,EAAE,EAAE;SACZ;KACF;CACF,CAAC"}

package/dist/utils/theme-gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-gen.d.ts","sourceRoot":"","sources":["../../src/utils/theme-gen.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAK3D,aAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AAE1C,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,GAAG,iBAAiB,CA8JrG"}
+{"version":3,"file":"theme-gen.d.ts","sourceRoot":"","sources":["../../src/utils/theme-gen.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAK3D,aAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;AAE1C,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,GAAG,iBAAiB,CAmKrG"}

package/dist/utils/theme-gen.js

@@ -175,6 +175,11 @@ export function generateChartsTheme(muiTheme, echartsTheme) {
         sparkline: {
             width: 2,
             color: '#1976d2'
+        },
+        container: {
+            padding: {
+                default: parseInt(muiTheme.spacing(1.5), 10)
+            }
         }
     };
 }

package/dist/utils/theme-gen.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/theme-gen.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\nimport { Theme } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { EChartsTheme, PersesChartsTheme } from '../model';\n\nconst DEFAULT_TEXT_COLOR = '#222';\n\n// avoid component override type errors since only palette and typography are used\ntype MuiTheme = Omit<Theme, 'components'>;\n\nexport function generateChartsTheme(muiTheme: MuiTheme, echartsTheme: EChartsTheme): PersesChartsTheme {\n  const primaryTextColor = muiTheme.palette.text?.primary ?? DEFAULT_TEXT_COLOR;\n\n  const muiConvertedTheme: EChartsTheme = {\n    title: {\n      show: false,\n    },\n    textStyle: {\n      color: primaryTextColor,\n      fontFamily: muiTheme.typography.fontFamily,\n      fontSize: 12,\n    },\n    grid: {\n      top: 5,\n      right: 20,\n      bottom: 0,\n      left: 20,\n      containLabel: true,\n    },\n    color: ['#8dd3c7', '#bebada', '#fb8072', '#80b1d3', '#fdb462'],\n    categoryAxis: {\n      show: true,\n      axisLabel: {\n        show: true,\n        color: primaryTextColor,\n        margin: 15,\n      },\n      axisTick: {\n        show: false,\n        length: 6,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      axisLine: {\n        show: true,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.6,\n        },\n      },\n      splitArea: {\n        show: false,\n        areaStyle: {\n          color: [muiTheme.palette.grey[300]],\n        },\n      },\n    },\n    valueAxis: {\n      show: true,\n      axisLabel: {\n        color: primaryTextColor,\n        margin: 12,\n      },\n      axisLine: {\n        show: false,\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.6,\n        },\n      },\n    },\n    legend: {\n      orient: 'horizontal',\n      textStyle: {\n        color: primaryTextColor,\n      },\n      pageTextStyle: {\n        color: muiTheme.palette.grey[600],\n      },\n      pageIconColor: muiTheme?.palette?.action?.active,\n      pageIconInactiveColor: muiTheme?.palette?.action?.disabled,\n    },\n    toolbox: {\n      show: true,\n      top: 10,\n      right: 10,\n      iconStyle: {\n        borderColor: primaryTextColor,\n      },\n    },\n    tooltip: {},\n    line: {\n      showSymbol: false,\n      symbol: 'circle',\n      symbolSize: 4,\n      smooth: false,\n      lineStyle: {\n        width: 1,\n      },\n      emphasis: {\n        lineStyle: {\n          width: 1.5,\n        },\n      },\n    },\n    bar: {\n      barMaxWidth: 150,\n      itemStyle: {\n        borderWidth: 0,\n        borderColor: muiTheme.palette.grey[300],\n      },\n    },\n    gauge: {\n      detail: {\n        fontSize: 18,\n        fontWeight: 600,\n        valueAnimation: false,\n      },\n      splitLine: {\n        distance: 0,\n        length: 4,\n        lineStyle: {\n          width: 1,\n        },\n      },\n      splitNumber: 12,\n    },\n  };\n\n  return {\n    echartsTheme: merge(muiConvertedTheme, echartsTheme),\n    noDataOption: {\n      title: {\n        show: true,\n        textStyle: {\n          color: primaryTextColor,\n          fontSize: 16,\n          fontWeight: 400,\n        },\n        text: 'No data',\n        left: 'center',\n        top: 'center',\n      },\n      xAxis: {\n        show: false,\n      },\n      yAxis: {\n        show: false,\n      },\n    },\n    sparkline: {\n      width: 2,\n      color: '#1976d2',\n    },\n    // TODO: add thresholdColors to theme\n  };\n}\n"],"names":["merge","DEFAULT_TEXT_COLOR","generateChartsTheme","muiTheme","echartsTheme","primaryTextColor","palette","text","primary","muiConvertedTheme","title","show","textStyle","color","fontFamily","typography","fontSize","grid","top","right","bottom","left","containLabel","categoryAxis","axisLabel","margin","axisTick","length","lineStyle","grey","axisLine","splitLine","width","opacity","splitArea","areaStyle","valueAxis","legend","orient","pageTextStyle","pageIconColor","action","active","pageIconInactiveColor","disabled","toolbox","iconStyle","borderColor","tooltip","line","showSymbol","symbol","symbolSize","smooth","emphasis","bar","barMaxWidth","itemStyle","borderWidth","gauge","detail","fontWeight","valueAnimation","distance","splitNumber","noDataOption","xAxis","yAxis","sparkline"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/theme-gen.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\nimport { Theme } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { EChartsTheme, PersesChartsTheme } from '../model';\n\nconst DEFAULT_TEXT_COLOR = '#222';\n\n// avoid component override type errors since only palette and typography are used\ntype MuiTheme = Omit<Theme, 'components'>;\n\nexport function generateChartsTheme(muiTheme: MuiTheme, echartsTheme: EChartsTheme): PersesChartsTheme {\n  const primaryTextColor = muiTheme.palette.text?.primary ?? DEFAULT_TEXT_COLOR;\n\n  const muiConvertedTheme: EChartsTheme = {\n    title: {\n      show: false,\n    },\n    textStyle: {\n      color: primaryTextColor,\n      fontFamily: muiTheme.typography.fontFamily,\n      fontSize: 12,\n    },\n    grid: {\n      top: 5,\n      right: 20,\n      bottom: 0,\n      left: 20,\n      containLabel: true,\n    },\n    color: ['#8dd3c7', '#bebada', '#fb8072', '#80b1d3', '#fdb462'],\n    categoryAxis: {\n      show: true,\n      axisLabel: {\n        show: true,\n        color: primaryTextColor,\n        margin: 15,\n      },\n      axisTick: {\n        show: false,\n        length: 6,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      axisLine: {\n        show: true,\n        lineStyle: {\n          color: muiTheme.palette.grey[600],\n        },\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.6,\n        },\n      },\n      splitArea: {\n        show: false,\n        areaStyle: {\n          color: [muiTheme.palette.grey[300]],\n        },\n      },\n    },\n    valueAxis: {\n      show: true,\n      axisLabel: {\n        color: primaryTextColor,\n        margin: 12,\n      },\n      axisLine: {\n        show: false,\n      },\n      splitLine: {\n        show: true,\n        lineStyle: {\n          width: 0.5,\n          color: muiTheme.palette.grey[300],\n          opacity: 0.6,\n        },\n      },\n    },\n    legend: {\n      orient: 'horizontal',\n      textStyle: {\n        color: primaryTextColor,\n      },\n      pageTextStyle: {\n        color: muiTheme.palette.grey[600],\n      },\n      pageIconColor: muiTheme?.palette?.action?.active,\n      pageIconInactiveColor: muiTheme?.palette?.action?.disabled,\n    },\n    toolbox: {\n      show: true,\n      top: 10,\n      right: 10,\n      iconStyle: {\n        borderColor: primaryTextColor,\n      },\n    },\n    tooltip: {},\n    line: {\n      showSymbol: false,\n      symbol: 'circle',\n      symbolSize: 4,\n      smooth: false,\n      lineStyle: {\n        width: 1,\n      },\n      emphasis: {\n        lineStyle: {\n          width: 1.5,\n        },\n      },\n    },\n    bar: {\n      barMaxWidth: 150,\n      itemStyle: {\n        borderWidth: 0,\n        borderColor: muiTheme.palette.grey[300],\n      },\n    },\n    gauge: {\n      detail: {\n        fontSize: 18,\n        fontWeight: 600,\n        valueAnimation: false,\n      },\n      splitLine: {\n        distance: 0,\n        length: 4,\n        lineStyle: {\n          width: 1,\n        },\n      },\n      splitNumber: 12,\n    },\n  };\n\n  return {\n    echartsTheme: merge(muiConvertedTheme, echartsTheme),\n    noDataOption: {\n      title: {\n        show: true,\n        textStyle: {\n          color: primaryTextColor,\n          fontSize: 16,\n          fontWeight: 400,\n        },\n        text: 'No data',\n        left: 'center',\n        top: 'center',\n      },\n      xAxis: {\n        show: false,\n      },\n      yAxis: {\n        show: false,\n      },\n    },\n    sparkline: {\n      width: 2,\n      color: '#1976d2',\n    },\n    container: {\n      padding: {\n        default: parseInt(muiTheme.spacing(1.5), 10),\n      },\n    },\n    // TODO: add thresholdColors to theme\n  };\n}\n"],"names":["merge","DEFAULT_TEXT_COLOR","generateChartsTheme","muiTheme","echartsTheme","primaryTextColor","palette","text","primary","muiConvertedTheme","title","show","textStyle","color","fontFamily","typography","fontSize","grid","top","right","bottom","left","containLabel","categoryAxis","axisLabel","margin","axisTick","length","lineStyle","grey","axisLine","splitLine","width","opacity","splitArea","areaStyle","valueAxis","legend","orient","pageTextStyle","pageIconColor","action","active","pageIconInactiveColor","disabled","toolbox","iconStyle","borderColor","tooltip","line","showSymbol","symbol","symbolSize","smooth","emphasis","bar","barMaxWidth","itemStyle","borderWidth","gauge","detail","fontWeight","valueAnimation","distance","splitNumber","noDataOption","xAxis","yAxis","sparkline","container","padding","default","parseInt","spacing"],"mappings":"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"}

package/dist/utils/theme-gen.test.js

@@ -29,6 +29,11 @@ describe('generateChartsTheme', ()=>{
     it('should return perses specific charts theme from converted MUI theme', ()=>{
         expect(chartsTheme).toMatchInlineSnapshot(`
       Object {
+        "container": Object {
+          "padding": Object {
+            "default": 12,
+          },
+        },
         "echartsTheme": Object {
           "bar": Object {
             "barMaxWidth": 150,

package/dist/utils/theme-gen.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/theme-gen.test.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\nimport { createTheme } from '@mui/material';\nimport { EChartsTheme, PersesChartsTheme } from '../model';\nimport { generateChartsTheme } from './theme-gen';\n\ndescribe('generateChartsTheme', () => {\n  const muiTheme = createTheme({});\n  const echartsThemeOverrides: EChartsTheme = {\n    legend: {\n      textStyle: {\n        color: 'yellow',\n      },\n    },\n    line: {\n      showSymbol: true,\n      smooth: true,\n    },\n  };\n  const chartsTheme: PersesChartsTheme = generateChartsTheme(muiTheme, echartsThemeOverrides);\n\n  it('should return perses specific charts theme from converted MUI theme', () => {\n    expect(chartsTheme).toMatchInlineSnapshot(`\n      Object {\n        \"echartsTheme\": Object {\n          \"bar\": Object {\n            \"barMaxWidth\": 150,\n            \"itemStyle\": Object {\n              \"borderColor\": \"#e0e0e0\",\n              \"borderWidth\": 0,\n            },\n          },\n          \"categoryAxis\": Object {\n            \"axisLabel\": Object {\n              \"color\": \"rgba(0, 0, 0, 0.87)\",\n              \"margin\": 15,\n              \"show\": true,\n            },\n            \"axisLine\": Object {\n              \"lineStyle\": Object {\n                \"color\": \"#757575\",\n              },\n              \"show\": true,\n            },\n            \"axisTick\": Object {\n              \"length\": 6,\n              \"lineStyle\": Object {\n                \"color\": \"#757575\",\n              },\n              \"show\": false,\n            },\n            \"show\": true,\n            \"splitArea\": Object {\n              \"areaStyle\": Object {\n                \"color\": Array [\n                  \"#e0e0e0\",\n                ],\n              },\n              \"show\": false,\n            },\n            \"splitLine\": Object {\n              \"lineStyle\": Object {\n                \"color\": \"#e0e0e0\",\n                \"opacity\": 0.6,\n                \"width\": 0.5,\n              },\n              \"show\": true,\n            },\n          },\n          \"color\": Array [\n            \"#8dd3c7\",\n            \"#bebada\",\n            \"#fb8072\",\n            \"#80b1d3\",\n            \"#fdb462\",\n          ],\n          \"gauge\": Object {\n            \"detail\": Object {\n              \"fontSize\": 18,\n              \"fontWeight\": 600,\n              \"valueAnimation\": false,\n            },\n            \"splitLine\": Object {\n              \"distance\": 0,\n              \"length\": 4,\n              \"lineStyle\": Object {\n                \"width\": 1,\n              },\n            },\n            \"splitNumber\": 12,\n          },\n          \"grid\": Object {\n            \"bottom\": 0,\n            \"containLabel\": true,\n            \"left\": 20,\n            \"right\": 20,\n            \"top\": 5,\n          },\n          \"legend\": Object {\n            \"orient\": \"horizontal\",\n            \"pageIconColor\": \"rgba(0, 0, 0, 0.54)\",\n            \"pageIconInactiveColor\": \"rgba(0, 0, 0, 0.26)\",\n            \"pageTextStyle\": Object {\n              \"color\": \"#757575\",\n            },\n            \"textStyle\": Object {\n              \"color\": \"yellow\",\n            },\n          },\n          \"line\": Object {\n            \"emphasis\": Object {\n              \"lineStyle\": Object {\n                \"width\": 1.5,\n              },\n            },\n            \"lineStyle\": Object {\n              \"width\": 1,\n            },\n            \"showSymbol\": true,\n            \"smooth\": true,\n            \"symbol\": \"circle\",\n            \"symbolSize\": 4,\n          },\n          \"textStyle\": Object {\n            \"color\": \"rgba(0, 0, 0, 0.87)\",\n            \"fontFamily\": \"\\\\\"Roboto\\\\\", \\\\\"Helvetica\\\\\", \\\\\"Arial\\\\\", sans-serif\",\n            \"fontSize\": 12,\n          },\n          \"title\": Object {\n            \"show\": false,\n          },\n          \"toolbox\": Object {\n            \"iconStyle\": Object {\n              \"borderColor\": \"rgba(0, 0, 0, 0.87)\",\n            },\n            \"right\": 10,\n            \"show\": true,\n            \"top\": 10,\n          },\n          \"tooltip\": Object {},\n          \"valueAxis\": Object {\n            \"axisLabel\": Object {\n              \"color\": \"rgba(0, 0, 0, 0.87)\",\n              \"margin\": 12,\n            },\n            \"axisLine\": Object {\n              \"show\": false,\n            },\n            \"show\": true,\n            \"splitLine\": Object {\n              \"lineStyle\": Object {\n                \"color\": \"#e0e0e0\",\n                \"opacity\": 0.6,\n                \"width\": 0.5,\n              },\n              \"show\": true,\n            },\n          },\n        },\n        \"noDataOption\": Object {\n          \"title\": Object {\n            \"left\": \"center\",\n            \"show\": true,\n            \"text\": \"No data\",\n            \"textStyle\": Object {\n              \"color\": \"rgba(0, 0, 0, 0.87)\",\n              \"fontSize\": 16,\n              \"fontWeight\": 400,\n            },\n            \"top\": \"center\",\n          },\n          \"xAxis\": Object {\n            \"show\": false,\n          },\n          \"yAxis\": Object {\n            \"show\": false,\n          },\n        },\n        \"sparkline\": Object {\n          \"color\": \"#1976d2\",\n          \"width\": 2,\n        },\n      }\n    `);\n  });\n});\n"],"names":["createTheme","generateChartsTheme","describe","muiTheme","echartsThemeOverrides","legend","textStyle","color","line","showSymbol","smooth","chartsTheme","it","expect","toMatchInlineSnapshot"],"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,WAAW,QAAQ,eAAe,CAAC;AAE5C,SAASC,mBAAmB,QAAQ,aAAa,CAAC;AAElDC,QAAQ,CAAC,qBAAqB,EAAE,IAAM;IACpC,MAAMC,QAAQ,GAAGH,WAAW,CAAC,EAAE,CAAC,AAAC;IACjC,MAAMI,qBAAqB,GAAiB;QAC1CC,MAAM,EAAE;YACNC,SAAS,EAAE;gBACTC,KAAK,EAAE,QAAQ;aAChB;SACF;QACDC,IAAI,EAAE;YACJC,UAAU,EAAE,IAAI;YAChBC,MAAM,EAAE,IAAI;SACb;KACF,AAAC;IACF,MAAMC,WAAW,GAAsBV,mBAAmB,CAACE,QAAQ,EAAEC,qBAAqB,CAAC,AAAC;IAE5FQ,EAAE,CAAC,qEAAqE,EAAE,IAAM;QAC9EC,MAAM,CAACF,WAAW,CAAC,CAACG,qBAAqB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiK3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/utils/theme-gen.test.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\nimport { createTheme } from '@mui/material';\nimport { EChartsTheme, PersesChartsTheme } from '../model';\nimport { generateChartsTheme } from './theme-gen';\n\ndescribe('generateChartsTheme', () => {\n  const muiTheme = createTheme({});\n  const echartsThemeOverrides: EChartsTheme = {\n    legend: {\n      textStyle: {\n        color: 'yellow',\n      },\n    },\n    line: {\n      showSymbol: true,\n      smooth: true,\n    },\n  };\n  const chartsTheme: PersesChartsTheme = generateChartsTheme(muiTheme, echartsThemeOverrides);\n\n  it('should return perses specific charts theme from converted MUI theme', () => {\n    expect(chartsTheme).toMatchInlineSnapshot(`\n      Object {\n        \"container\": Object {\n          \"padding\": Object {\n            \"default\": 12,\n          },\n        },\n        \"echartsTheme\": Object {\n          \"bar\": Object {\n            \"barMaxWidth\": 150,\n            \"itemStyle\": Object {\n              \"borderColor\": \"#e0e0e0\",\n              \"borderWidth\": 0,\n            },\n          },\n          \"categoryAxis\": Object {\n            \"axisLabel\": Object {\n              \"color\": \"rgba(0, 0, 0, 0.87)\",\n              \"margin\": 15,\n              \"show\": true,\n            },\n            \"axisLine\": Object {\n              \"lineStyle\": Object {\n                \"color\": \"#757575\",\n              },\n              \"show\": true,\n            },\n            \"axisTick\": Object {\n              \"length\": 6,\n              \"lineStyle\": Object {\n                \"color\": \"#757575\",\n              },\n              \"show\": false,\n            },\n            \"show\": true,\n            \"splitArea\": Object {\n              \"areaStyle\": Object {\n                \"color\": Array [\n                  \"#e0e0e0\",\n                ],\n              },\n              \"show\": false,\n            },\n            \"splitLine\": Object {\n              \"lineStyle\": Object {\n                \"color\": \"#e0e0e0\",\n                \"opacity\": 0.6,\n                \"width\": 0.5,\n              },\n              \"show\": true,\n            },\n          },\n          \"color\": Array [\n            \"#8dd3c7\",\n            \"#bebada\",\n            \"#fb8072\",\n            \"#80b1d3\",\n            \"#fdb462\",\n          ],\n          \"gauge\": Object {\n            \"detail\": Object {\n              \"fontSize\": 18,\n              \"fontWeight\": 600,\n              \"valueAnimation\": false,\n            },\n            \"splitLine\": Object {\n              \"distance\": 0,\n              \"length\": 4,\n              \"lineStyle\": Object {\n                \"width\": 1,\n              },\n            },\n            \"splitNumber\": 12,\n          },\n          \"grid\": Object {\n            \"bottom\": 0,\n            \"containLabel\": true,\n            \"left\": 20,\n            \"right\": 20,\n            \"top\": 5,\n          },\n          \"legend\": Object {\n            \"orient\": \"horizontal\",\n            \"pageIconColor\": \"rgba(0, 0, 0, 0.54)\",\n            \"pageIconInactiveColor\": \"rgba(0, 0, 0, 0.26)\",\n            \"pageTextStyle\": Object {\n              \"color\": \"#757575\",\n            },\n            \"textStyle\": Object {\n              \"color\": \"yellow\",\n            },\n          },\n          \"line\": Object {\n            \"emphasis\": Object {\n              \"lineStyle\": Object {\n                \"width\": 1.5,\n              },\n            },\n            \"lineStyle\": Object {\n              \"width\": 1,\n            },\n            \"showSymbol\": true,\n            \"smooth\": true,\n            \"symbol\": \"circle\",\n            \"symbolSize\": 4,\n          },\n          \"textStyle\": Object {\n            \"color\": \"rgba(0, 0, 0, 0.87)\",\n            \"fontFamily\": \"\\\\\"Roboto\\\\\", \\\\\"Helvetica\\\\\", \\\\\"Arial\\\\\", sans-serif\",\n            \"fontSize\": 12,\n          },\n          \"title\": Object {\n            \"show\": false,\n          },\n          \"toolbox\": Object {\n            \"iconStyle\": Object {\n              \"borderColor\": \"rgba(0, 0, 0, 0.87)\",\n            },\n            \"right\": 10,\n            \"show\": true,\n            \"top\": 10,\n          },\n          \"tooltip\": Object {},\n          \"valueAxis\": Object {\n            \"axisLabel\": Object {\n              \"color\": \"rgba(0, 0, 0, 0.87)\",\n              \"margin\": 12,\n            },\n            \"axisLine\": Object {\n              \"show\": false,\n            },\n            \"show\": true,\n            \"splitLine\": Object {\n              \"lineStyle\": Object {\n                \"color\": \"#e0e0e0\",\n                \"opacity\": 0.6,\n                \"width\": 0.5,\n              },\n              \"show\": true,\n            },\n          },\n        },\n        \"noDataOption\": Object {\n          \"title\": Object {\n            \"left\": \"center\",\n            \"show\": true,\n            \"text\": \"No data\",\n            \"textStyle\": Object {\n              \"color\": \"rgba(0, 0, 0, 0.87)\",\n              \"fontSize\": 16,\n              \"fontWeight\": 400,\n            },\n            \"top\": \"center\",\n          },\n          \"xAxis\": Object {\n            \"show\": false,\n          },\n          \"yAxis\": Object {\n            \"show\": false,\n          },\n        },\n        \"sparkline\": Object {\n          \"color\": \"#1976d2\",\n          \"width\": 2,\n        },\n      }\n    `);\n  });\n});\n"],"names":["createTheme","generateChartsTheme","describe","muiTheme","echartsThemeOverrides","legend","textStyle","color","line","showSymbol","smooth","chartsTheme","it","expect","toMatchInlineSnapshot"],"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,WAAW,QAAQ,eAAe,CAAC;AAE5C,SAASC,mBAAmB,QAAQ,aAAa,CAAC;AAElDC,QAAQ,CAAC,qBAAqB,EAAE,IAAM;IACpC,MAAMC,QAAQ,GAAGH,WAAW,CAAC,EAAE,CAAC,AAAC;IACjC,MAAMI,qBAAqB,GAAiB;QAC1CC,MAAM,EAAE;YACNC,SAAS,EAAE;gBACTC,KAAK,EAAE,QAAQ;aAChB;SACF;QACDC,IAAI,EAAE;YACJC,UAAU,EAAE,IAAI;YAChBC,MAAM,EAAE,IAAI;SACb;KACF,AAAC;IACF,MAAMC,WAAW,GAAsBV,mBAAmB,CAACE,QAAQ,EAAEC,qBAAqB,CAAC,AAAC;IAE5FQ,EAAE,CAAC,qEAAqE,EAAE,IAAM;QAC9EC,MAAM,CAACF,WAAW,CAAC,CAACG,qBAAqB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsK3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -35,11 +35,11 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "0.22.0",
+    "@perses-dev/core": "0.23.1",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
     "date-fns-tz": "^1.3.7",
-    "echarts": "^5.3.3",
+    "echarts": "^5.4.1",
     "lodash-es": "^4.17.21",
     "mathjs": "^10.6.4",
     "mdi-material-ui": "^7.4.0",