@perses-dev/components 0.37.2 → 0.38.0

package/dist/utils/chart-actions.js

@@ -48,5 +48,71 @@
         }
     }
 }
+/*
+ * Convert a point from pixel coordinate to logical coordinate.
+ * Used to determine if cursor is over chart canvas and closest datapoint.
+ * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel
+ */ export function getPointInGrid(cursorCoordX, cursorCoordY, chart) {
+    if (chart === undefined) {
+        return null;
+    }
+    const pointInPixel = [
+        cursorCoordX,
+        cursorCoordY
+    ];
+    if (!chart.containPixel('grid', pointInPixel)) {
+        return null;
+    }
+    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
+    return pointInGrid;
+}
+/*
+ * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.
+ * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.
+ * More info: https://echarts.apache.org/en/api.html#action
+ */ export function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasizedSeriesIndexes, nonEmphasizedSeriesIndexes, emphasizedDatapoints, duplicateDatapoints) {
+    // Accounts for multiple series that are rendered direct on top of eachother.
+    // Only applies select state to the datapoint that is visible to avoid color mismatch.
+    const lastEmphasizedDatapoint = duplicateDatapoints.length > 0 ? duplicateDatapoints[duplicateDatapoints.length - 1] : emphasizedDatapoints[emphasizedDatapoints.length - 1];
+    if (lastEmphasizedDatapoint !== undefined) {
+        // Corresponds to select options inside getTimeSeries util.
+        // https://echarts.apache.org/en/option.html#series-line.select.itemStyle
+        chart.dispatchAction({
+            type: 'select',
+            seriesIndex: lastEmphasizedDatapoint.seriesIndex,
+            dataIndex: lastEmphasizedDatapoint.dataIndex,
+            // Shared crosshair should not emphasize datapoints on adjacent charts.
+            escapeConnect: true
+        });
+    }
+    // Clears emphasis state of all lines that are not emphasized.
+    // Emphasized is a subset of just the nearby series that are closest to cursor.
+    chart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: nonEmphasizedSeriesIndexes
+    });
+    // https://echarts.apache.org/en/api.html#action.highlight
+    if (emphasizedSeriesIndexes.length > 0) {
+        // Fadeout opacity of all series not closest to cursor.
+        chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: emphasizedSeriesIndexes,
+            notBlur: false,
+            escapeConnect: true
+        });
+    } else {
+        // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.
+        chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: nearbySeriesIndexes,
+            notBlur: true,
+            escapeConnect: true
+        });
+        // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting
+        chart.dispatchAction({
+            type: 'toggleSelect'
+        });
+    }
+}
 
 //# sourceMappingURL=chart-actions.js.map

package/dist/utils/chart-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/chart-actions.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 { ECharts as EChartsInstance } from 'echarts/core';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  // TODO: remove startIndex and endIndex once LineChart is deprecated\n  startIndex?: number;\n  endIndex?: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon.\n * https://stackoverflow.com/questions/57183297/is-there-a-way-to-use-zoom-of-type-select-without-showing-the-toolbar\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance, totalSeries: number) {\n  if (chart.dispatchAction !== undefined) {\n    for (let i = 0; i < totalSeries; i++) {\n      chart.dispatchAction({\n        type: 'downplay',\n        seriesIndex: i,\n      });\n    }\n  }\n}\n"],"names":["enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","totalSeries","i","seriesIndex"],"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;AAYjC;;;CAGC,GACD,OAAO,SAASA,cAAc,CAACC,KAAsB,EAAE;IACrD,MAAMC,UAAU,GAAGD,KAAK,CAAC,QAAQ,CAAC,AAAC;IACnC,IAAIC,UAAU,KAAKC,SAAS,EAAE,OAAO;IACrC,IAAID,UAAU,CAACE,MAAM,CAACC,OAAO,KAAKF,SAAS,IAAID,UAAU,CAACE,MAAM,CAACC,OAAO,CAACC,MAAM,GAAG,CAAC,EAAE;QACnF,wGAAwG;QACxG,IAAIJ,UAAU,CAACE,MAAM,CAACC,OAAO,CAAC,CAAC,CAAC,CAACE,OAAO,CAACC,QAAQ,CAACC,UAAU,CAACC,IAAI,KAAK,QAAQ,EAAE;YAC9ET,KAAK,CAACU,cAAc,CAAC;gBACnBC,IAAI,EAAE,kBAAkB;gBACxBC,GAAG,EAAE,gBAAgB;gBACrBC,oBAAoB,EAAE,IAAI;aAC3B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;AACH,CAAC;AAED;;CAEC,GACD,OAAO,SAASC,YAAY,CAACd,KAAsB,EAAE;IACnD,wEAAwE;IACxEA,KAAK,CAACU,cAAc,CAAC;QACnBC,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;AACL,CAAC;AAED;;;CAGC,GACD,OAAO,SAASI,sBAAsB,CAACf,KAAsB,EAAEgB,WAAmB,EAAE;IAClF,IAAIhB,KAAK,CAACU,cAAc,KAAKR,SAAS,EAAE;QACtC,IAAK,IAAIe,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGD,WAAW,EAAEC,CAAC,EAAE,CAAE;YACpCjB,KAAK,CAACU,cAAc,CAAC;gBACnBC,IAAI,EAAE,UAAU;gBAChBO,WAAW,EAAED,CAAC;aACf,CAAC,CAAC;QACL,CAAC;IACH,CAAC;AACH,CAAC"}
+{"version":3,"sources":["../../src/utils/chart-actions.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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { DatapointInfo } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  // TODO: remove startIndex and endIndex once LineChart is deprecated\n  startIndex?: number;\n  endIndex?: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon.\n * https://stackoverflow.com/questions/57183297/is-there-a-way-to-use-zoom-of-type-select-without-showing-the-toolbar\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance, totalSeries: number) {\n  if (chart.dispatchAction !== undefined) {\n    for (let i = 0; i < totalSeries; i++) {\n      chart.dispatchAction({\n        type: 'downplay',\n        seriesIndex: i,\n      });\n    }\n  }\n}\n\n/*\n * Convert a point from pixel coordinate to logical coordinate.\n * Used to determine if cursor is over chart canvas and closest datapoint.\n * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel\n */\nexport function getPointInGrid(cursorCoordX: number, cursorCoordY: number, chart?: EChartsInstance) {\n  if (chart === undefined) {\n    return null;\n  }\n\n  const pointInPixel = [cursorCoordX, cursorCoordY];\n  if (!chart.containPixel('grid', pointInPixel)) {\n    return null;\n  }\n\n  const pointInGrid: number[] = chart.convertFromPixel('grid', pointInPixel);\n  return pointInGrid;\n}\n\n/*\n * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.\n * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.\n * More info: https://echarts.apache.org/en/api.html#action\n */\nexport function batchDispatchNearbySeriesActions(\n  chart: EChartsInstance,\n  nearbySeriesIndexes: number[],\n  emphasizedSeriesIndexes: number[],\n  nonEmphasizedSeriesIndexes: number[],\n  emphasizedDatapoints: DatapointInfo[],\n  duplicateDatapoints: DatapointInfo[]\n) {\n  // Accounts for multiple series that are rendered direct on top of eachother.\n  // Only applies select state to the datapoint that is visible to avoid color mismatch.\n  const lastEmphasizedDatapoint =\n    duplicateDatapoints.length > 0\n      ? duplicateDatapoints[duplicateDatapoints.length - 1]\n      : emphasizedDatapoints[emphasizedDatapoints.length - 1];\n  if (lastEmphasizedDatapoint !== undefined) {\n    // Corresponds to select options inside getTimeSeries util.\n    // https://echarts.apache.org/en/option.html#series-line.select.itemStyle\n    chart.dispatchAction({\n      type: 'select',\n      seriesIndex: lastEmphasizedDatapoint.seriesIndex,\n      dataIndex: lastEmphasizedDatapoint.dataIndex,\n      // Shared crosshair should not emphasize datapoints on adjacent charts.\n      escapeConnect: true, // TODO: try to remove escapeConnect and match by seriesName for cross panel correlation\n    });\n  }\n\n  // Clears emphasis state of all lines that are not emphasized.\n  // Emphasized is a subset of just the nearby series that are closest to cursor.\n  chart.dispatchAction({\n    type: 'downplay',\n    seriesIndex: nonEmphasizedSeriesIndexes,\n  });\n\n  // https://echarts.apache.org/en/api.html#action.highlight\n  if (emphasizedSeriesIndexes.length > 0) {\n    // Fadeout opacity of all series not closest to cursor.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: emphasizedSeriesIndexes,\n      notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n  } else {\n    // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: nearbySeriesIndexes,\n      notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n\n    // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting\n    chart.dispatchAction({\n      type: 'toggleSelect', // https://echarts.apache.org/en/api.html#action.toggleSelect\n    });\n  }\n}\n"],"names":["enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","totalSeries","i","seriesIndex","getPointInGrid","cursorCoordX","cursorCoordY","pointInPixel","containPixel","pointInGrid","convertFromPixel","batchDispatchNearbySeriesActions","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","emphasizedDatapoints","duplicateDatapoints","lastEmphasizedDatapoint","dataIndex","escapeConnect","notBlur"],"mappings":"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"}

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,CACjC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY;AAC1B;;;GAGG;AACH,wBAAwB,CAAC,EAAE,MAAM,GAChC,iBAAiB,CAmNnB"}
+{"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,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY;AAC1B;;;GAGG;AACH,wBAAwB,CAAC,EAAE,MAAM,GAChC,iBAAiB,CA+OnB"}

package/dist/utils/theme-gen.js

@@ -16,9 +16,9 @@ export function generateChartsTheme(muiTheme, echartsTheme, /**
    * The id of the container that will have the chart tooltip appended to it.
    * By default, chart tooltip uses the body of the top-level document object.
    */ tooltipPortalContainerId) {
-    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;
+    var ref, ref1, ref2, ref3, ref4, ref5, ref6;
+    var ref7;
+    const primaryTextColor = (ref7 = (ref = muiTheme.palette.text) === null || ref === void 0 ? void 0 : ref.primary) !== null && ref7 !== void 0 ? ref7 : DEFAULT_TEXT_COLOR;
     const muiConvertedTheme = {
         title: {
             show: false
@@ -70,7 +70,7 @@ export function generateChartsTheme(muiTheme, echartsTheme, /**
                 lineStyle: {
                     width: 0.5,
                     color: muiTheme.palette.grey[300],
-                    opacity: 0.6
+                    opacity: 0.4
                 }
             },
             splitArea: {
@@ -107,7 +107,7 @@ export function generateChartsTheme(muiTheme, echartsTheme, /**
                 lineStyle: {
                     width: 0.5,
                     color: muiTheme.palette.grey[300],
-                    opacity: 0.6
+                    opacity: 0.4
                 }
             },
             splitArea: {
@@ -156,7 +156,30 @@ export function generateChartsTheme(muiTheme, echartsTheme, /**
                 borderColor: primaryTextColor
             }
         },
-        tooltip: {},
+        tooltip: {
+            backgroundColor: (ref5 = muiTheme.palette.designSystem) === null || ref5 === void 0 ? void 0 : ref5.grey[800],
+            borderColor: (ref6 = muiTheme.palette.designSystem) === null || ref6 === void 0 ? void 0 : ref6.grey[800],
+            textStyle: {
+                color: '#fff',
+                fontSize: 11
+            }
+        },
+        axisPointer: {
+            lineStyle: {
+                color: muiTheme.palette.grey[500]
+            }
+        },
+        markLine: {
+            symbol: 'none',
+            symbolSize: 0,
+            itemStyle: {
+                color: muiTheme.palette.grey[500]
+            },
+            lineStyle: {
+                type: 'dashed',
+                width: 1
+            }
+        },
         line: {
             showSymbol: false,
             symbol: 'circle',
@@ -175,7 +198,12 @@ export function generateChartsTheme(muiTheme, echartsTheme, /**
             barMaxWidth: 150,
             itemStyle: {
                 borderWidth: 0,
+                borderRadius: 0,
                 borderColor: muiTheme.palette.grey[300]
+            },
+            label: {
+                show: false,
+                color: primaryTextColor
             }
         },
         gauge: {

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/merge';\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(\n  muiTheme: MuiTheme,\n  echartsTheme: EChartsTheme,\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, chart tooltip uses the body of the top-level document object.\n   */\n  tooltipPortalContainerId?: string\n): 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    // Accessible categorical palette from: https://davidmathlogic.com/colorblind\n    color: [\n      '#56B4E9', // lt blue\n      '#009E73', // med green\n      '#0072B2', // dk blue\n      '#CC79A7', // lt purple\n      '#F0E442', // yellow\n      '#E69F00', // orange\n      '#D55E00', // red\n    ],\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    timeAxis: {\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    tooltipPortalContainerId,\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    thresholds: {\n      defaultColor: muiTheme.palette.success.main,\n      palette: ['#FFCC00', muiTheme.palette.warning.main, muiTheme.palette.error.main],\n    },\n  };\n}\n"],"names":["merge","DEFAULT_TEXT_COLOR","generateChartsTheme","muiTheme","echartsTheme","tooltipPortalContainerId","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","timeAxis","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","thresholds","defaultColor","success","main","warning","error"],"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/merge';\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(\n  muiTheme: MuiTheme,\n  echartsTheme: EChartsTheme,\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, chart tooltip uses the body of the top-level document object.\n   */\n  tooltipPortalContainerId?: string\n): 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    // Accessible categorical palette from: https://davidmathlogic.com/colorblind\n    color: [\n      '#56B4E9', // lt blue\n      '#009E73', // med green\n      '#0072B2', // dk blue\n      '#CC79A7', // lt purple\n      '#F0E442', // yellow\n      '#E69F00', // orange\n      '#D55E00', // red\n    ],\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.4,\n        },\n      },\n      splitArea: {\n        show: false,\n        areaStyle: {\n          color: [muiTheme.palette.grey[300]],\n        },\n      },\n    },\n    timeAxis: {\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.4,\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      backgroundColor: muiTheme.palette.designSystem?.grey[800],\n      borderColor: muiTheme.palette.designSystem?.grey[800],\n      textStyle: {\n        color: '#fff',\n        fontSize: 11,\n      },\n    },\n    axisPointer: {\n      lineStyle: {\n        color: muiTheme.palette.grey[500],\n      },\n    },\n    markLine: {\n      symbol: 'none',\n      symbolSize: 0,\n      itemStyle: {\n        color: muiTheme.palette.grey[500],\n      },\n      lineStyle: {\n        type: 'dashed',\n        width: 1,\n      },\n    },\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        borderRadius: 0,\n        borderColor: muiTheme.palette.grey[300],\n      },\n      label: {\n        show: false,\n        color: primaryTextColor,\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    tooltipPortalContainerId,\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    thresholds: {\n      defaultColor: muiTheme.palette.success.main,\n      palette: ['#FFCC00', muiTheme.palette.warning.main, muiTheme.palette.error.main],\n    },\n  };\n}\n"],"names":["merge","DEFAULT_TEXT_COLOR","generateChartsTheme","muiTheme","echartsTheme","tooltipPortalContainerId","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","timeAxis","valueAxis","legend","orient","pageTextStyle","pageIconColor","action","active","pageIconInactiveColor","disabled","toolbox","iconStyle","borderColor","tooltip","backgroundColor","designSystem","axisPointer","markLine","symbol","symbolSize","itemStyle","type","line","showSymbol","smooth","emphasis","bar","barMaxWidth","borderWidth","borderRadius","label","gauge","detail","fontWeight","valueAnimation","distance","splitNumber","noDataOption","xAxis","yAxis","sparkline","container","padding","default","parseInt","spacing","thresholds","defaultColor","success","main","warning","error"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.37.2",
+  "version": "0.38.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -36,7 +36,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "0.37.2",
+    "@perses-dev/core": "0.38.0",
     "@tanstack/react-table": "^8.9.1",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
@@ -50,7 +50,7 @@
     "react-virtuoso": "^4.3.6"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.37.2"
+    "@perses-dev/storybook": "0.38.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.0",