@perses-dev/components 0.0.0-snapshot-time-range-height-80d08fc

package/dist/utils/mathjs.js

@@ -0,0 +1,20 @@
+// 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.
+import { roundDependencies, create } from 'mathjs';
+// This ensures we get a minimal mathjs bundle for just what we need (see https://mathjs.org/docs/custom_bundling.html)
+const { round  } = create({
+    roundDependencies
+});
+export { round };
+
+//# sourceMappingURL=mathjs.js.map

package/dist/utils/mathjs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/mathjs.ts"],"sourcesContent":["// Copyright 2022 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 { roundDependencies, create } from 'mathjs';\n\n// This ensures we get a minimal mathjs bundle for just what we need (see https://mathjs.org/docs/custom_bundling.html)\nconst { round } = create({ roundDependencies });\nexport { round };\n"],"names":["roundDependencies","create","round"],"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,iBAAiB,EAAEC,MAAM,QAAQ,QAAQ,CAAC;AAEnD,uHAAuH;AACvH,MAAM,EAAEC,KAAK,CAAA,EAAE,GAAGD,MAAM,CAAC;IAAED,iBAAiB;CAAE,CAAC,AAAC;AAChD,SAASE,KAAK,GAAG"}

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(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,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,GAAG,iBAAiB,CA8JrG"}

package/dist/utils/theme-gen.js

@@ -0,0 +1,182 @@
+// 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.
+import { merge } from 'lodash-es';
+const DEFAULT_TEXT_COLOR = '#222';
+export function generateChartsTheme(muiTheme, echartsTheme) {
+    var ref, ref1, ref2, ref3, ref4;
+    var ref5;
+    const primaryTextColor = (ref5 = (ref = muiTheme.palette.text) === null || ref === void 0 ? void 0 : ref.primary) !== null && ref5 !== void 0 ? ref5 : DEFAULT_TEXT_COLOR;
+    const muiConvertedTheme = {
+        title: {
+            show: false
+        },
+        textStyle: {
+            color: primaryTextColor,
+            fontFamily: muiTheme.typography.fontFamily,
+            fontSize: 12
+        },
+        grid: {
+            top: 5,
+            right: 20,
+            bottom: 0,
+            left: 20,
+            containLabel: true
+        },
+        color: [
+            '#8dd3c7',
+            '#bebada',
+            '#fb8072',
+            '#80b1d3',
+            '#fdb462'
+        ],
+        categoryAxis: {
+            show: true,
+            axisLabel: {
+                show: true,
+                color: primaryTextColor,
+                margin: 15
+            },
+            axisTick: {
+                show: false,
+                length: 6,
+                lineStyle: {
+                    color: muiTheme.palette.grey[600]
+                }
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: muiTheme.palette.grey[600]
+                }
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 0.5,
+                    color: muiTheme.palette.grey[300],
+                    opacity: 0.6
+                }
+            },
+            splitArea: {
+                show: false,
+                areaStyle: {
+                    color: [
+                        muiTheme.palette.grey[300]
+                    ]
+                }
+            }
+        },
+        valueAxis: {
+            show: true,
+            axisLabel: {
+                color: primaryTextColor,
+                margin: 12
+            },
+            axisLine: {
+                show: false
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 0.5,
+                    color: muiTheme.palette.grey[300],
+                    opacity: 0.6
+                }
+            }
+        },
+        legend: {
+            orient: 'horizontal',
+            textStyle: {
+                color: primaryTextColor
+            },
+            pageTextStyle: {
+                color: muiTheme.palette.grey[600]
+            },
+            pageIconColor: muiTheme === null || muiTheme === void 0 ? void 0 : (ref1 = muiTheme.palette) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.action) === null || ref2 === void 0 ? void 0 : ref2.active,
+            pageIconInactiveColor: muiTheme === null || muiTheme === void 0 ? void 0 : (ref3 = muiTheme.palette) === null || ref3 === void 0 ? void 0 : (ref4 = ref3.action) === null || ref4 === void 0 ? void 0 : ref4.disabled
+        },
+        toolbox: {
+            show: true,
+            top: 10,
+            right: 10,
+            iconStyle: {
+                borderColor: primaryTextColor
+            }
+        },
+        tooltip: {},
+        line: {
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 4,
+            smooth: false,
+            lineStyle: {
+                width: 1
+            },
+            emphasis: {
+                lineStyle: {
+                    width: 1.5
+                }
+            }
+        },
+        bar: {
+            barMaxWidth: 150,
+            itemStyle: {
+                borderWidth: 0,
+                borderColor: muiTheme.palette.grey[300]
+            }
+        },
+        gauge: {
+            detail: {
+                fontSize: 18,
+                fontWeight: 600,
+                valueAnimation: false
+            },
+            splitLine: {
+                distance: 0,
+                length: 4,
+                lineStyle: {
+                    width: 1
+                }
+            },
+            splitNumber: 12
+        }
+    };
+    return {
+        echartsTheme: merge(muiConvertedTheme, echartsTheme),
+        noDataOption: {
+            title: {
+                show: true,
+                textStyle: {
+                    color: primaryTextColor,
+                    fontSize: 16,
+                    fontWeight: 400
+                },
+                text: 'No data',
+                left: 'center',
+                top: 'center'
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            }
+        },
+        sparkline: {
+            width: 2,
+            color: '#1976d2'
+        }
+    };
+}
+
+//# sourceMappingURL=theme-gen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/theme-gen.ts"],"sourcesContent":["// Copyright 2022 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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"}

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,195 @@
+// 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.
+import { createTheme } from '@mui/material';
+import { generateChartsTheme } from './theme-gen';
+describe('generateChartsTheme', ()=>{
+    const muiTheme = createTheme({});
+    const echartsThemeOverrides = {
+        legend: {
+            textStyle: {
+                color: 'yellow'
+            }
+        },
+        line: {
+            showSymbol: true,
+            smooth: true
+        }
+    };
+    const chartsTheme = generateChartsTheme(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,
+        },
+      }
+    `);
+    });
+});
+
+//# sourceMappingURL=theme-gen.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/theme-gen.test.ts"],"sourcesContent":["// Copyright 2022 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"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@perses-dev/components",
+  "version": "0.0.0-snapshot-time-range-height-80d08fc",
+  "description": "Common UI components used across Perses features",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/perses/perses/blob/main/README.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/perses/perses.git"
+  },
+  "bugs": {
+    "url": "https://github.com/perses/perses/issues"
+  },
+  "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "./dist/GaugeChart/GaugeChart.js",
+    "./dist/LineChart/LineChart.js",
+    "./dist/StatChart/StatChart.js"
+  ],
+  "scripts": {
+    "clean": "rimraf dist/",
+    "build": "concurrently \"npm:build:*\"",
+    "build:cjs": "swc ./src -d dist/cjs --config-file ../.cjs.swcrc",
+    "build:esm": "swc ./src -d dist --config-file ../.swcrc",
+    "build:types": "tsc --emitDeclarationOnly --declaration --preserveWatchOutput",
+    "start": "concurrently -P \"npm:build:* -- {*}\" -- --watch",
+    "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": {
+    "@fontsource/lato": "^4.5.10",
+    "@mui/x-date-pickers": "^5.0.0-beta.1",
+    "@perses-dev/core": "0.0.0-snapshot-time-range-height-80d08fc",
+    "date-fns": "^2.28.0",
+    "date-fns-tz": "^1.3.7",
+    "echarts": "^5.3.3",
+    "lodash-es": "^4.17.21",
+    "mathjs": "^10.6.4",
+    "mdi-material-ui": "^7.4.0",
+    "react-error-boundary": "^3.1.4"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.10.0",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}