@perses-dev/components 0.4.2 → 0.5.0

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

@@ -0,0 +1,196 @@
+"use strict";
+// Copyright 2022 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const theme_gen_1 = require("./theme-gen");
+describe('generateChartsTheme', () => {
+    const muiTheme = (0, material_1.createTheme)({});
+    const echartsThemeOverrides = {
+        legend: {
+            textStyle: {
+                color: 'yellow',
+            },
+        },
+        line: {
+            showSymbol: true,
+            smooth: true,
+        },
+    };
+    const chartsTheme = (0, theme_gen_1.generateChartsTheme)('perses', muiTheme, echartsThemeOverrides);
+    it('should return perses specific charts theme from converted MUI theme', () => {
+        expect(chartsTheme).toMatchInlineSnapshot(`
+      Object {
+        "echartsTheme": Object {
+          "bar": Object {
+            "barMaxWidth": 150,
+            "itemStyle": Object {
+              "borderColor": "#e0e0e0",
+              "borderWidth": 0,
+            },
+          },
+          "categoryAxis": Object {
+            "axisLabel": Object {
+              "color": "rgba(0, 0, 0, 0.87)",
+              "margin": 15,
+              "show": true,
+            },
+            "axisLine": Object {
+              "lineStyle": Object {
+                "color": "#757575",
+              },
+              "show": true,
+            },
+            "axisTick": Object {
+              "length": 6,
+              "lineStyle": Object {
+                "color": "#757575",
+              },
+              "show": false,
+            },
+            "show": true,
+            "splitArea": Object {
+              "areaStyle": Object {
+                "color": Array [
+                  "#e0e0e0",
+                ],
+              },
+              "show": false,
+            },
+            "splitLine": Object {
+              "lineStyle": Object {
+                "color": "#e0e0e0",
+                "opacity": 0.6,
+                "width": 0.5,
+              },
+              "show": true,
+            },
+          },
+          "color": Array [
+            "#8dd3c7",
+            "#bebada",
+            "#fb8072",
+            "#80b1d3",
+            "#fdb462",
+          ],
+          "gauge": Object {
+            "detail": Object {
+              "fontSize": 18,
+              "fontWeight": 600,
+              "valueAnimation": false,
+            },
+            "splitLine": Object {
+              "distance": 0,
+              "length": 4,
+              "lineStyle": Object {
+                "width": 1,
+              },
+            },
+            "splitNumber": 12,
+          },
+          "grid": Object {
+            "bottom": 0,
+            "containLabel": true,
+            "left": 20,
+            "right": 20,
+            "top": 5,
+          },
+          "legend": Object {
+            "orient": "horizontal",
+            "pageIconColor": "rgba(0, 0, 0, 0.54)",
+            "pageIconInactiveColor": "rgba(0, 0, 0, 0.26)",
+            "pageTextStyle": Object {
+              "color": "#757575",
+            },
+            "textStyle": Object {
+              "color": "yellow",
+            },
+          },
+          "line": Object {
+            "emphasis": Object {
+              "lineStyle": Object {
+                "width": 1.5,
+              },
+            },
+            "lineStyle": Object {
+              "width": 1,
+            },
+            "showSymbol": true,
+            "smooth": true,
+            "symbol": "circle",
+            "symbolSize": 4,
+          },
+          "textStyle": Object {
+            "color": "rgba(0, 0, 0, 0.87)",
+            "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+            "fontSize": 12,
+          },
+          "title": Object {
+            "show": false,
+          },
+          "toolbox": Object {
+            "iconStyle": Object {
+              "borderColor": "rgba(0, 0, 0, 0.87)",
+            },
+            "right": 10,
+            "show": true,
+            "top": 10,
+          },
+          "tooltip": Object {},
+          "valueAxis": Object {
+            "axisLabel": Object {
+              "color": "rgba(0, 0, 0, 0.87)",
+              "margin": 12,
+            },
+            "axisLine": Object {
+              "show": false,
+            },
+            "show": true,
+            "splitLine": Object {
+              "lineStyle": Object {
+                "color": "#e0e0e0",
+                "opacity": 0.6,
+                "width": 0.5,
+              },
+              "show": true,
+            },
+          },
+        },
+        "noDataOption": Object {
+          "title": Object {
+            "left": "center",
+            "show": true,
+            "text": "No data",
+            "textStyle": Object {
+              "color": "rgba(0, 0, 0, 0.87)",
+              "fontSize": 16,
+              "fontWeight": 400,
+            },
+            "top": "center",
+          },
+          "xAxis": Object {
+            "show": false,
+          },
+          "yAxis": Object {
+            "show": false,
+          },
+        },
+        "sparkline": Object {
+          "color": "#1976d2",
+          "width": 2,
+        },
+        "themeName": "perses",
+      }
+    `);
+    });
+});

package/dist/context/ChartsThemeProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PersesChartsTheme } from '../model';
+export interface ChartsThemeProviderProps {
+    themeName: string;
+    chartsTheme?: PersesChartsTheme;
+    children?: React.ReactNode;
+}
+export declare function ChartsThemeProvider(props: ChartsThemeProviderProps): JSX.Element;
+export declare const ChartsThemeContext: React.Context<PersesChartsTheme | undefined>;
+export declare function useChartsTheme(): PersesChartsTheme;
+//# sourceMappingURL=ChartsThemeProvider.d.ts.map

package/dist/context/ChartsThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartsThemeProvider.d.ts","sourceRoot":"","sources":["../../src/context/ChartsThemeProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eASlE;AAED,eAAO,MAAM,kBAAkB,8CAA0D,CAAC;AAE1F,wBAAgB,cAAc,IAAI,iBAAiB,CAMlD"}

package/dist/context/ChartsThemeProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useContext}from"react";import{registerTheme}from"echarts";export function ChartsThemeProvider(e){const{children:t,themeName:r,chartsTheme:o}=e;return void 0!==o&&void 0!==o.echartsTheme&&registerTheme(r,o.echartsTheme),_jsx(ChartsThemeContext.Provider,{value:o,children:t})}export const ChartsThemeContext=createContext(void 0);export function useChartsTheme(){const e=useContext(ChartsThemeContext);if(void 0===e)throw new Error("No ChartsThemeContext found. Did you forget a Provider?");return e}

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
-export * from './GaugeChart';
+export * from './InfoTooltip';
 export * from './LineChart';
+export * from './GaugeChart';
 export * from './StatChart';
-export * from './utils/combine-sx';
-export * from './model/graph-model';
-export * from './model/units';
+export * from './context/ChartsThemeProvider';
+export * from './utils';
+export * from './model';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1 +1 @@
-export*from"./EChart";export*from"./ErrorAlert";export*from"./ErrorBoundary";export*from"./GaugeChart";export*from"./LineChart";export*from"./StatChart";export*from"./utils/combine-sx";export*from"./model/graph-model";export*from"./model/units";
+export*from"./EChart";export*from"./ErrorAlert";export*from"./ErrorBoundary";export*from"./InfoTooltip";export*from"./LineChart";export*from"./GaugeChart";export*from"./StatChart";export*from"./context/ChartsThemeProvider";export*from"./utils";export*from"./model";

package/dist/model/{graph-model.d.ts → graph.d.ts}

@@ -2,6 +2,10 @@ import { LineSeriesOption } from 'echarts/charts';
 export declare const PROGRESSIVE_MODE_SERIES_LIMIT = 500;
 export declare type UnixTimeMs = number;
 export declare type GraphSeriesValueTuple = [timestamp: UnixTimeMs, value: number];
+export interface GraphSeries {
+    name: string;
+    values: Iterable<GraphSeriesValueTuple>;
+}
 export declare type EChartsValues = number | null | '-';
 export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
     data: Iterable<GraphSeriesValueTuple> | EChartsValues[];
@@ -9,7 +13,7 @@ export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
 export declare type EChartsDataFormat = {
     timeSeries: EChartsTimeSeries[];
     xAxis: number[];
-    xAxisMax?: number | 'dataMax';
+    xAxisMax?: number | string;
     rangeMs?: number;
 };
-//# sourceMappingURL=graph-model.d.ts.map
+//# sourceMappingURL=graph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/model/graph.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/model/index.d.ts

@@ -0,0 +1,4 @@
+export * from './graph';
+export * from './theme';
+export * from './units';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/model/index.js

@@ -0,0 +1 @@
+export*from"./graph";export*from"./theme";export*from"./units";

package/dist/model/theme.d.ts

@@ -0,0 +1,16 @@
+import type { EChartsOption, EChartsCoreOption, BarSeriesOption, LineSeriesOption, GaugeSeriesOption } from 'echarts';
+export interface PersesChartsTheme {
+    themeName: string;
+    echartsTheme: EChartsTheme;
+    noDataOption: EChartsCoreOption;
+    sparkline: {
+        width: number;
+        color: string;
+    };
+}
+export interface EChartsTheme extends EChartsOption {
+    bar?: BarSeriesOption;
+    line?: LineSeriesOption;
+    gauge?: GaugeSeriesOption;
+}
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +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,SAAS,EAAE,MAAM,CAAC;IAClB,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"}

package/dist/model/theme.js

@@ -0,0 +1 @@
+export{};

package/dist/model/units.d.ts

@@ -1,25 +1,36 @@
-export declare type UnitOptions = TimeUnitOptions | PercentUnitOptions | DecimalUnitOptions;
+export declare const DEFAULT_DECIMAL_PLACES = 2;
+export declare type UnitOptions = TimeUnitOptions | PercentUnitOptions | DecimalUnitOptions | BytesUnitOptions;
 export declare function formatValue(value: number, unitOptions?: UnitOptions): string;
 declare const timeUnitKinds: readonly ["Milliseconds", "Seconds", "Minutes", "Hours", "Days", "Weeks", "Months", "Years"];
 declare type TimeUnitOptions = {
     kind: typeof timeUnitKinds[number];
 };
-declare const percentUnitKinds: readonly ["Percent", "PercentDecimal"];
+declare const percentUnitKinds: readonly ["Percent", "PercentDecimal", "%"];
 declare type PercentUnitOptions = {
     kind: typeof percentUnitKinds[number];
-    decimal_places: number;
+    decimal_places?: number;
 };
 declare const decimalUnitKinds: readonly ["Decimal"];
 declare type DecimalUnitOptions = {
     kind: typeof decimalUnitKinds[number];
-    decimal_places: number;
-    suffix?: 'string';
-    unitDisplay?: 'short' | 'long' | 'narrow';
+    decimal_places?: number;
+    abbreviate?: boolean;
+};
+/**
+ * Takes large numbers and abbreviates them with the appropriate suffix
+ * 10123 -> 10.123k
+ * 1000000 -> 1M
+ */
+export declare function abbreviateLargeNumber(num: number, decimals?: number): string;
+/**
+ * Takes large numbers, rounds and abbreviates them with the appropriate suffix
+ * Add modifier to run on output value prior to unit being added (defaults to rounding)
+ */
+export declare function formatNumber(num: number, modifier?: (n: number) => number): string;
+declare const bytesUnitKinds: readonly ["Bytes"];
+declare type BytesUnitOptions = {
+    kind: typeof bytesUnitKinds[number];
+    decimal_places?: number;
 };
-export declare function abbreviateLargeNumber(num: number): string | number;
-export declare function isSanctionedSimpleUnitIdentifier(unitIdentifier: string): boolean;
-export declare const SANCTIONED_UNITS: string[];
-export declare function removeUnitNamespace(unit: string): string;
-export declare const SIMPLE_UNITS: string[];
 export {};
 //# sourceMappingURL=units.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../src/model/units.ts"],"names":[],"mappings":"AAeA,oBAAY,WAAW,GAAG,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAEpF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAmB5E;AAED,QAAA,MAAM,aAAa,8FAA+F,CAAC;AAGnH,aAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;CACpC,CAAC;AA0EF,QAAA,MAAM,gBAAgB,wCAAyC,CAAC;AAGhE,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAcF,QAAA,MAAM,gBAAgB,sBAAuB,CAAC;AAG9C,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3C,CAAC;AAkCF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,mBAUhD;AAGD,wBAAgB,gCAAgC,CAAC,cAAc,EAAE,MAAM,WAEtE;AAGD,eAAO,MAAM,gBAAgB,UA4C5B,CAAC;AAGF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,UAE/C;AAED,eAAO,MAAM,YAAY,UAA4C,CAAC"}
+{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../src/model/units.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,oBAAY,WAAW,GAAG,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;AAEvG,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAwB5E;AAGD,QAAA,MAAM,aAAa,8FAA+F,CAAC;AAGnH,aAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;CACpC,CAAC;AA2EF,QAAA,MAAM,gBAAgB,6CAA8C,CAAC;AAGrE,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAiBF,QAAA,MAAM,gBAAgB,sBAAuB,CAAC;AAG9C,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAuBF;;;;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;AAGD,QAAA,MAAM,cAAc,oBAAqB,CAAC;AAG1C,aAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC"}

package/dist/model/units.js

@@ -1 +1 @@
-import{milliseconds}from"date-fns";export function formatValue(e,i){if(void 0===i)return e.toString();if(isTimeUnit(i))return formatTime(e,i);if(isPercentUnit(i))return formatPercent(e,i);if(isDecimalUnit(i))return formatDecimal(e,i);throw new Error(`Unknown unit options ${i}`)}const timeUnitKinds=["Milliseconds","Seconds","Minutes","Hours","Days","Weeks","Months","Years"],timeUnitKindsSet=new Set(timeUnitKinds);function isTimeUnit(e){return timeUnitKindsSet.has(e.kind)}function formatTime(e,i){const t={};switch(i.kind){case"Milliseconds":t.seconds=e/1e3;break;case"Seconds":t.seconds=e;break;case"Minutes":t.minutes=e;break;case"Hours":t.hours=e;break;case"Days":t.days=e;break;case"Weeks":t.weeks=e;break;case"Months":t.months=e;break;case"Years":t.years=e;break;default:const n=i.kind;throw new Error(`Unknown time unit type ${n}`)}const n=milliseconds(t),r=n/1e3;if(r<1)return`${n.toFixed()} milliseconds`;const a=r/60;if(a<1)return`${r.toFixed()} seconds`;const s=a/60;if(s<1)return`${a.toFixed()} minutes`;const o=s/24;if(o<1)return`${s.toFixed()} hours`;const c=o/7;if(c<1)return`${o.toFixed()} days`;const m=c/52;return m<1?`${c.toFixed()} weeks`:`${m.toFixed()} years`}const percentUnitKinds=["Percent","PercentDecimal"],percentUnitKindsSet=new Set(percentUnitKinds);function isPercentUnit(e){return percentUnitKindsSet.has(e.kind)}function formatPercent(e,i){return"PercentDecimal"===i.kind&&(e*=100),e.toFixed(i.decimal_places)+"%"}const decimalUnitKinds=["Decimal"],decimalUnitKindsSet=new Set(decimalUnitKinds);function isDecimalUnit(e){return decimalUnitKindsSet.has(e.kind)}function formatDecimal(e,i){var t,n;const r=null!==(t=i.decimal_places)&&void 0!==t?t:2;if(void 0!==i.suffix&&isSanctionedSimpleUnitIdentifier(i.suffix)){const t={style:"unit",minimumFractionDigits:0,maximumFractionDigits:r,useGrouping:!0,unit:i.suffix,unitDisplay:null!==(n=i.unitDisplay)&&void 0!==n?n:"narrow"};return new Intl.NumberFormat("en-US",t).format(e)}const a={style:"decimal",minimumFractionDigits:0,maximumFractionDigits:r,useGrouping:!0};return new Intl.NumberFormat("en-US",a).format(e)}export function abbreviateLargeNumber(e){return e>=1e12?e/1e12+"T":e>=1e9?e/1e9+"B":e>=1e6?e/1e6+"M":e>=1e3?e/1e3+"k":e}export function isSanctionedSimpleUnitIdentifier(e){return SIMPLE_UNITS.indexOf(e)>-1}export const SANCTIONED_UNITS=["angle-degree","area-acre","area-hectare","concentr-percent","digital-bit","digital-byte","digital-gigabit","digital-gigabyte","digital-kilobit","digital-kilobyte","digital-megabit","digital-megabyte","digital-petabyte","digital-terabit","digital-terabyte","duration-day","duration-hour","duration-millisecond","duration-minute","duration-month","duration-second","duration-week","duration-year","length-centimeter","length-foot","length-inch","length-kilometer","length-meter","length-mile-scandinavian","length-mile","length-millimeter","length-yard","mass-gram","mass-kilogram","mass-ounce","mass-pound","mass-stone","temperature-celsius","temperature-fahrenheit","volume-fluid-ounce","volume-gallon","volume-liter","volume-milliliter"];export function removeUnitNamespace(e){return e.slice(e.indexOf("-")+1)}export const SIMPLE_UNITS=SANCTIONED_UNITS.map(removeUnitNamespace);
+import{milliseconds}from"date-fns";import{round}from"mathjs";export const DEFAULT_DECIMAL_PLACES=2;export function formatValue(e,t){var n;if(void 0===t)return e.toString();if(isDecimalUnit(t))return formatDecimal(e,t);if(isTimeUnit(t))return formatTime(e,t);if(isPercentUnit(t))return formatPercent(e,t);if(isBytesUnit(t))return formatBytes(e,null!==(n=t.decimal_places)&&void 0!==n?n:2);throw new Error(`Unknown unit options ${t}`)}const timeUnitKinds=["Milliseconds","Seconds","Minutes","Hours","Days","Weeks","Months","Years"],timeUnitKindsSet=new Set(timeUnitKinds);function isTimeUnit(e){return timeUnitKindsSet.has(e.kind)}function formatTime(e,t){const n={};switch(t.kind){case"Milliseconds":n.seconds=e/1e3;break;case"Seconds":n.seconds=e;break;case"Minutes":n.minutes=e;break;case"Hours":n.hours=e;break;case"Days":n.days=e;break;case"Weeks":n.weeks=e;break;case"Months":n.months=e;break;case"Years":n.years=e;break;default:const i=t.kind;throw new Error(`Unknown time unit type ${i}`)}const i=milliseconds(n),r=i/1e3;if(r<1)return`${i.toFixed()} milliseconds`;const s=r/60;if(s<1)return`${r.toFixed()} seconds`;const o=s/60;if(o<1)return`${s.toFixed()} minutes`;const a=o/24;if(a<1)return`${o.toFixed()} hours`;const c=a/7;if(c<1)return`${a.toFixed()} days`;const d=c/52;return d<1?`${c.toFixed()} weeks`:`${d.toFixed()} years`}const percentUnitKinds=["Percent","PercentDecimal","%"],percentUnitKindsSet=new Set(percentUnitKinds);function isPercentUnit(e){return percentUnitKindsSet.has(e.kind)}function formatPercent(e,t){var n;const i=null!==(n=t.decimal_places)&&void 0!==n?n:2;return"PercentDecimal"===t.kind&&(e*=100),e.toFixed(i)+"%"}const decimalUnitKinds=["Decimal"],decimalUnitKindsSet=new Set(decimalUnitKinds);function isDecimalUnit(e){return decimalUnitKindsSet.has(e.kind)}function formatDecimal(e,t){var n;const i=null!==(n=t.decimal_places)&&void 0!==n?n:2;if(!0===t.abbreviate)return abbreviateLargeNumber(e,i);const r={style:"decimal",minimumFractionDigits:0,maximumFractionDigits:i,useGrouping:!0};return new Intl.NumberFormat("en-US",r).format(e)}export function abbreviateLargeNumber(e,t=2){return formatNumber(e,(e=>round(e,t)))}export function formatNumber(e,t){const n=null!=t?t:Math.round;return e>=1e12?n(e/1e12)+"T":e>=1e9?n(e/1e9)+"B":e>=1e6?n(e/1e6)+"M":e>=1e3?n(e/1e3)+"K":e.toString()}const bytesUnitKinds=["Bytes"],bytesUnitKindsSet=new Set(bytesUnitKinds);function isBytesUnit(e){return bytesUnitKindsSet.has(e.kind)}function formatBytes(e,t=2){if(0===e)return"0 Bytes";const n=t<0?0:t,i=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}

package/dist/test/index.d.ts

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

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

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

package/dist/test/index.js

@@ -0,0 +1 @@
+export*from"./render";

package/dist/test/render.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { RenderOptions } from '@testing-library/react';
+/**
+ * Test helper to render a React component with some common app-level providers wrapped around it.
+ */
+export declare function renderWithContext(ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+//# sourceMappingURL=render.d.ts.map

package/dist/test/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK/D;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,gIAEjG"}

package/dist/test/render.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import{QueryClient,QueryClientProvider}from"react-query";const queryClient=new QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1}}});export function renderWithContext(e,r){return render(_jsx(QueryClientProvider,{client:queryClient,children:e}),r)}

package/dist/test/setup-tests.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+//# sourceMappingURL=setup-tests.d.ts.map

package/dist/test/setup-tests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-tests.d.ts","sourceRoot":"","sources":["../../src/test/setup-tests.ts"],"names":[],"mappings":"AAcA,OAAO,yCAAyC,CAAC"}

package/dist/test/setup-tests.js

@@ -0,0 +1 @@
+import"@testing-library/jest-dom/extend-expect";jest.mock("echarts/core");

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './combine-sx';
+export * from './theme-gen';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/utils/index.js

@@ -0,0 +1 @@
+export*from"./combine-sx";export*from"./theme-gen";

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

@@ -0,0 +1,6 @@
+import { Theme } from '@mui/material';
+import { EChartsTheme, PersesChartsTheme } from '../model';
+declare type MuiTheme = Omit<Theme, 'components'>;
+export declare function generateChartsTheme(themeName: string, muiTheme: MuiTheme, echartsTheme: EChartsTheme): PersesChartsTheme;
+export {};
+//# sourceMappingURL=theme-gen.d.ts.map

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

@@ -0,0 +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,CACjC,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,GACzB,iBAAiB,CA+JnB"}

package/dist/utils/theme-gen.js

@@ -0,0 +1 @@
+import merge from"lodash/merge";const DEFAULT_TEXT_COLOR="#222";export function generateChartsTheme(e,t,o){var l,i,a,r,n,s;const h=null!==(i=null===(l=t.palette.text)||void 0===l?void 0:l.primary)&&void 0!==i?i:"#222",d={title:{show:!1},textStyle:{color:h,fontFamily:t.typography.fontFamily,fontSize:12},grid:{top:5,right:20,bottom:0,left:20,containLabel:!0},color:["#8dd3c7","#bebada","#fb8072","#80b1d3","#fdb462"],categoryAxis:{show:!0,axisLabel:{show:!0,color:h,margin:15},axisTick:{show:!1,length:6,lineStyle:{color:t.palette.grey[600]}},axisLine:{show:!0,lineStyle:{color:t.palette.grey[600]}},splitLine:{show:!0,lineStyle:{width:.5,color:t.palette.grey[300],opacity:.6}},splitArea:{show:!1,areaStyle:{color:[t.palette.grey[300]]}}},valueAxis:{show:!0,axisLabel:{color:h,margin:12},axisLine:{show:!1},splitLine:{show:!0,lineStyle:{width:.5,color:t.palette.grey[300],opacity:.6}}},legend:{orient:"horizontal",textStyle:{color:h},pageTextStyle:{color:t.palette.grey[600]},pageIconColor:null===(r=null===(a=null==t?void 0:t.palette)||void 0===a?void 0:a.action)||void 0===r?void 0:r.active,pageIconInactiveColor:null===(s=null===(n=null==t?void 0:t.palette)||void 0===n?void 0:n.action)||void 0===s?void 0:s.disabled},toolbox:{show:!0,top:10,right:10,iconStyle:{borderColor:h}},tooltip:{},line:{showSymbol:!1,symbol:"circle",symbolSize:4,smooth:!1,lineStyle:{width:1},emphasis:{lineStyle:{width:1.5}}},bar:{barMaxWidth:150,itemStyle:{borderWidth:0,borderColor:t.palette.grey[300]}},gauge:{detail:{fontSize:18,fontWeight:600,valueAnimation:!1},splitLine:{distance:0,length:4,lineStyle:{width:1}},splitNumber:12}};return{themeName:e,echartsTheme:merge(d,o),noDataOption:{title:{show:!0,textStyle:{color:h,fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1}},sparkline:{width:2,color:"#1976d2"}}}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme-gen.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-gen.test.d.ts","sourceRoot":"","sources":["../../src/utils/theme-gen.test.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1 @@
+import{createTheme}from"@mui/material";import{generateChartsTheme}from"./theme-gen";describe("generateChartsTheme",(()=>{const n=createTheme({}),e=generateChartsTheme("perses",n,{legend:{textStyle:{color:"yellow"}},line:{showSymbol:!0,smooth:!0}});it("should return perses specific charts theme from converted MUI theme",(()=>{expect(e).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        "themeName": "perses",\n      }\n    ')}))}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -18,13 +18,14 @@
     "clean": "rimraf dist/",
     "build": "tsc --build",
     "build:cjs": "tsc --project ./tsconfig.cjs.json",
-    "test": "echo 'no test to run' && exit 0",
+    "test": "TZ=UTC jest",
+    "test:watch": "TZ=UTC jest --watch",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/core": "^0.4.2",
-    "echarts": "^5.3.2",
+    "@perses-dev/core": "^0.5.0",
+    "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"
   },

package/dist/GaugeChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../src/GaugeChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGpF,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AA0BzD,oBAAY,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAEvD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA2IhD"}

package/dist/GaugeChart.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";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{formatValue}from"./model/units";import{EChart}from"./EChart";use([EChartsGaugeChart,GridComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function GaugeChart(t){const{width:e,height:o,data:i,unit:r,axisLine:a}=t,s=useMemo((()=>null==i?noDataOption:{title:{show:!1},tooltip:{show:!1},series:[{type:"gauge",center:["50%","65%"],radius:"100%",startAngle:200,endAngle:-20,min:0,max:100,splitNumber:12,silent:!0,progress:{show:!0,width:22,itemStyle:{color:"auto"}},pointer:{show:!1},axisLine:{lineStyle:{color:[[1,"#e1e5e9"]],width:22}},axisTick:{show:!1,distance:-28,splitNumber:5,lineStyle:{width:2,color:"#999"}},splitLine:{show:!1,distance:-32,length:6,lineStyle:{width:2,color:"#999"}},axisLabel:{show:!1,distance:-18,color:"#999",fontSize:12},anchor:{show:!1},title:{show:!1},detail:{show:!1},data:[{value:i}]},{type:"gauge",center:["50%","65%"],radius:"114%",startAngle:200,endAngle:-20,min:0,max:100,pointer:{show:!1,itemStyle:{color:"auto"}},axisLine:a,axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},detail:{show:!0,valueAnimation:!1,width:"60%",borderRadius:8,offsetCenter:[0,"-9%"],fontSize:20,fontWeight:"bolder",color:"inherit",formatter:t=>formatValue(t,{kind:r.kind,decimal_places:0})},data:[{value:i}]}]}),[i,r,a]);return _jsx(EChart,{sx:{width:e,height:o},option:s})}

package/dist/LineChart.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import type { GridComponentOption, LegendComponentOption, ToolboxComponentOption, VisualMapComponentOption } from 'echarts';
-import { EChartsDataFormat } from './model/graph-model';
-export interface ZoomEventData {
-    start: number;
-    end: number;
-    startIndex: number;
-    endIndex: number;
-}
-interface LineChartProps {
-    height: number;
-    data: EChartsDataFormat;
-    grid?: GridComponentOption;
-    legend?: LegendComponentOption;
-    toolbox?: ToolboxComponentOption;
-    visualMap?: VisualMapComponentOption[];
-    dataZoomEnabled?: boolean;
-    onDataZoom?: (e: ZoomEventData) => void;
-}
-export declare function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEnabled, onDataZoom, }: LineChartProps): JSX.Element;
-export {};
-//# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../src/LineChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAyCvF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,eAAe,EACf,UAAU,GACX,EAAE,cAAc,eAwLhB"}

package/dist/LineChart.js

@@ -1 +0,0 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box,useTheme}from"@mui/material";import merge from"lodash/merge";import{use}from"echarts/core";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{EChart}from"./EChart";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"./model/graph-model";import{abbreviateLargeNumber}from"./model/units";import{emptyTooltipData}from"./tooltip/tooltip-model";import{Tooltip}from"./tooltip/Tooltip";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function LineChart({height:e,data:t,grid:o,legend:r,toolbox:n,visualMap:a,dataZoomEnabled:i,onDataZoom:s}){const m=useTheme(),l=useRef(),[p,c]=useState(!0),u=useMemo((()=>({datazoom:e=>{var o,r;if(void 0===s||void 0===e.batch[0])return;const n=null!==(o=e.batch[0].startValue)&&void 0!==o?o:0,a=null!==(r=e.batch[0].endValue)&&void 0!==r?r:t.xAxis.length-1,i=t.xAxis[n],m=t.xAxis[a];void 0!==i&&void 0!==m&&s({start:i,end:m,startIndex:n,endIndex:a})}})),[t,s]);void 0!==l.current&&!0===i&&l.current.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0});const d=useDeepMemo((()=>{var e;if(void 0===t.timeSeries)return{};if(null===t.timeSeries||0===t.timeSeries.length)return noDataOption;const s=t.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,l={show:!0,top:10,right:10,iconStyle:{borderColor:m.palette.text.primary},feature:{dataZoom:{icon:i?null:void 0,yAxisIndex:"none"},restore:{}},emphasis:{iconStyle:{textFill:m.palette.text.primary}}};!1===i&&delete l.feature.dataZoom.icon;const p=null!==(e=t.rangeMs)&&void 0!==e?e:getDateRange(t.xAxis);return{title:{show:!1},grid:merge({top:10,right:20,bottom:5,left:20,containLabel:!0},o),toolbox:merge(l,n),series:t.timeSeries,xAxis:{type:"category",data:t.xAxis,max:t.xAxisMax,axisLabel:{margin:15,color:m.palette.text.primary,formatter:e=>getFormattedDate(e,p)},axisTick:{show:!1},axisLine:{lineStyle:{color:m.palette.grey[600]}}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{margin:12,color:m.palette.text.primary,formatter:e=>abbreviateLargeNumber(e)},splitLine:{show:!0,lineStyle:{width:.5,color:m.palette.grey[300],opacity:.95}}},animation:!1,tooltip:{show:s,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},legend:r,visualMap:a}}),[t,m,o,r,n,i,a]);return _jsxs(Box,{sx:{height:e},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&c(!1)},onMouseUp:()=>{c(!0)},onMouseLeave:()=>{c(!1)},onMouseEnter:()=>{c(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:l,tooltipData:emptyTooltipData,chartData:t,wrapLabels:!0}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:d,onEvents:u,_instance:l})]})}function getDateRange(e){const t=36e5;if(0===e.length)return t;const o=e[e.length-1];return void 0===e[0]||void 0===o?t:o-e[0]}function getFormattedDate(e,t){const o={hour:"numeric",minute:"numeric",hourCycle:"h23"};return t<=18e5?o.second="numeric":t>=864e5&&(o.month="numeric",o.day="numeric"),new Intl.DateTimeFormat(void 0,o).format(e).replace(/, /g," ")}

package/dist/StatChart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../src/StatChart.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjF,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAiC5D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA+J9C"}

package/dist/StatChart.js

@@ -1 +0,0 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";import{useTheme}from"@mui/material";import{merge}from"lodash-es";import{use}from"echarts/core";import{GaugeChart as EChartsGaugeChart}from"echarts/charts";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DatasetComponent,TitleComponent,TooltipComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{formatValue}from"./model/units";import{EChart}from"./EChart";use([EChartsGaugeChart,EChartsLineChart,GridComponent,DatasetComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function StatChart(t){const{width:e,height:o,data:a,unit:r,backgroundColor:i,sparkline:n}=t,s=useTheme(),h=useMemo((()=>{var t;if(void 0===a.seriesData)return{};if(null===a.seriesData||void 0===a.calculatedValue)return noDataOption;const h=a.seriesData,l=null!==(t=a.calculatedValue)&&void 0!==t?t:0,m=e>250,p=!0===m?a.name:"",u=Math.min(e,1.2*o),c=Math.min(u/4*.65,72),d=.5*c,f=[{type:"gauge",data:[{value:l,name:p}],detail:{show:!0,offsetCenter:["0%","-65%"],formatter:[`{name|${p}}`,`{value|${formatValue(l,r)}}`].join("\n"),rich:{name:{padding:!0===m?[0,0,5,0]:0,fontSize:d,lineHeight:2.5*d,fontWeight:500},value:{}}},center:["50%","60%"],animation:!1,silent:!0,title:{show:!1},progress:{show:!1},pointer:{show:!1},axisLine:{show:!1},axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},anchor:{show:!1},zlevel:2}];if(void 0!==n){const t={type:"line",data:[...h.values],zlevel:1,symbol:"none",animation:!1,lineStyle:{color:"#FFFFFF",opacity:.6},areaStyle:{color:"#FFFFFF",opacity:.3},silent:!0},e=merge(t,n);f.push(e)}return{title:{show:!1},grid:[{show:!0,backgroundColor:i,top:0,right:0,bottom:0,left:0,containLabel:!1,borderWidth:0},{show:!1,top:"45%",right:0,bottom:0,left:0,containLabel:!1}],xAxis:{type:"time",show:!1,boundaryGap:!1,gridIndex:1},yAxis:{type:"value",show:!1,gridIndex:1},tooltip:{show:!1},series:f,textStyle:{color:"transparent"===i?s.palette.text.primary:"#FFFFFF",fontSize:25,lineHeight:18,fontFamily:'"Lato", sans-serif',fontWeight:"bold"},media:[{query:{maxWidth:150},option:{textStyle:{fontSize:12}}},{query:{minWidth:150},option:{textStyle:{fontSize:`max(14px, ${c}px)`,lineHeight:Math.min(16,1.2*c)}}}]}}),[a,o,s,r,e,n,i]);return _jsx(EChart,{sx:{width:e,height:o},option:h})}