@perses-dev/components 0.16.0 → 0.18.0

package/dist/cjs/LineChart/LineChart.js

@@ -28,7 +28,6 @@ const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
 const _graph = require("../model/graph");
-const _units = require("../model/units");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _tooltip = require("../Tooltip/Tooltip");
 const _utils = require("./utils");
@@ -46,7 +45,7 @@ const _utils = require("./utils");
     _components.VisualMapComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
+function LineChart({ height , data , yAxis , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -132,18 +131,7 @@ function LineChart({ height , data , unit , grid , legend , visualMap , onDataZo
                     }
                 }
             },
-            yAxis: {
-                type: 'value',
-                boundaryGap: [
-                    0,
-                    '10%'
-                ],
-                axisLabel: {
-                    formatter: (value)=>{
-                        return (0, _units.formatValue)(value, unit);
-                    }
-                }
-            },
+            yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
                 show: showPointsOnHover,
@@ -168,6 +156,7 @@ function LineChart({ height , data , unit , grid , legend , visualMap , onDataZo
         return option;
     }, [
         data,
+        yAxis,
         grid,
         legend,
         visualMap

package/dist/cjs/LineChart/utils.js

@@ -24,8 +24,11 @@ _export(exports, {
     enableDataZoom: ()=>enableDataZoom,
     restoreChart: ()=>restoreChart,
     getDateRange: ()=>getDateRange,
-    getFormattedDate: ()=>getFormattedDate
+    getFormattedDate: ()=>getFormattedDate,
+    getYAxes: ()=>getYAxes
 });
+const _lodashEs = require("lodash-es");
+const _model = require("../model");
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
@@ -41,6 +44,7 @@ function enableDataZoom(chart) {
     }
 }
 function restoreChart(chart) {
+    // TODO: support incremental unzoom instead of restore to original state
     chart.dispatchAction({
         type: 'restore'
     });
@@ -70,3 +74,21 @@ function getFormattedDate(value, rangeMs) {
     // remove comma when month / day present
     return DATE_FORMAT.format(value).replace(/, /g, ' ');
 }
+function getYAxes(yAxis, unit) {
+    // TODO: support alternate yAxis that shows on right side
+    const Y_AXIS_DEFAULT = {
+        type: 'value',
+        boundaryGap: [
+            0,
+            '10%'
+        ],
+        axisLabel: {
+            formatter: (value)=>{
+                return (0, _model.formatValue)(value, unit);
+            }
+        }
+    };
+    return [
+        (0, _lodashEs.merge)(Y_AXIS_DEFAULT, yAxis)
+    ];
+}

package/dist/cjs/YAxisLabel.js

@@ -0,0 +1,45 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "YAxisLabel", {
+    enumerable: true,
+    get: ()=>YAxisLabel
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function YAxisLabel({ name , height  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            display: 'inline-block',
+            maxWidth: height,
+            position: 'absolute',
+            top: '45%',
+            transform: 'translateX(-50%) rotate(-90deg)',
+            transformOrigin: 'top',
+            textAlign: 'center',
+            zIndex: 1
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body1",
+            sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: name
+        })
+    });
+}

package/dist/cjs/index.js

@@ -27,10 +27,12 @@ _exportStar(require("./LineChart"), exports);
 _exportStar(require("./OptionsEditorLayout"), exports);
 _exportStar(require("./StatChart"), exports);
 _exportStar(require("./UnitSelector"), exports);
+_exportStar(require("./YAxisLabel"), exports);
 _exportStar(require("./context/ChartsThemeProvider"), exports);
 _exportStar(require("./utils"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./test-utils"), exports);
+_exportStar(require("./theme"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/theme/index.js

@@ -0,0 +1,28 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./theme"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/theme/palette/background.js

@@ -0,0 +1,40 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "background", {
+    enumerable: true,
+    get: ()=>background
+});
+const _colors = require("./colors");
+const background = (mode)=>{
+    const navigation = _colors.blue[150];
+    const overlay = 'rgba(21, 23, 33, 0.75)'; // grey[900] with opacity 75%
+    return mode === 'light' ? {
+        navigation,
+        overlay,
+        default: _colors.grey[50],
+        paper: _colors.white,
+        tooltip: _colors.grey[100],
+        border: _colors.grey[100]
+    } : {
+        navigation,
+        overlay,
+        default: _colors.grey[900],
+        paper: _colors.grey[850],
+        tooltip: _colors.grey[700],
+        border: _colors.grey[600]
+    };
+};

package/dist/cjs/theme/palette/colors/blue.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "blue", {
+    enumerable: true,
+    get: ()=>blue
+});
+const blue = {
+    50: '#E7F1FC',
+    100: '#D0E3FA',
+    150: '#B8D5F7',
+    200: '#A1C7F5',
+    300: '#72ABF0',
+    400: '#438FEB',
+    500: '#1473E6',
+    600: '#105CB8',
+    700: '#0C458A',
+    800: '#082E5C',
+    850: '#062345',
+    900: '#04172E',
+    950: '#020C17'
+};

package/dist/cjs/theme/palette/colors/common.js

@@ -0,0 +1,28 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    white: ()=>white,
+    black: ()=>black
+});
+const white = '#FFFFFF';
+const black = '#000000';

package/dist/cjs/theme/palette/colors/green.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "green", {
+    enumerable: true,
+    get: ()=>green
+});
+const green = {
+    50: '#EAF9F1',
+    100: '#D5F2E3',
+    150: '#C1ECD4',
+    200: '#ACE5C6',
+    300: '#82D9AA',
+    400: '#59CC8D',
+    500: '#2FBF71',
+    600: '#26995A',
+    700: '#1C7344',
+    800: '#134C2D',
+    850: '#0E3922',
+    900: '#092617',
+    950: '#05130B'
+};

package/dist/cjs/theme/palette/colors/grey.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "grey", {
+    enumerable: true,
+    get: ()=>grey
+});
+const grey = {
+    50: '#F0F1F6',
+    100: '#E1E3ED',
+    150: '#D2D5E4',
+    200: '#C3C7DB',
+    300: '#A4ACC8',
+    400: '#8690B6',
+    500: '#717CA4',
+    600: '#535D83',
+    700: '#3E4662',
+    800: '#2A2E42',
+    850: '#1F2331',
+    900: '#151721',
+    950: '#0A0C10'
+};

package/dist/cjs/theme/palette/colors/index.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./blue"), exports);
+_exportStar(require("./common"), exports);
+_exportStar(require("./green"), exports);
+_exportStar(require("./grey"), exports);
+_exportStar(require("./orange"), exports);
+_exportStar(require("./purple"), exports);
+_exportStar(require("./red"), exports);
+_exportStar(require("./types"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/theme/palette/colors/orange.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "orange", {
+    enumerable: true,
+    get: ()=>orange
+});
+const orange = {
+    50: '#FFF5E8',
+    100: '#FFECD2',
+    150: '#FFE2BB',
+    200: '#FFD9A4',
+    300: '#FFC577',
+    400: '#FFB249',
+    500: '#FF9F1C',
+    600: '#CC7F16',
+    700: '#995F11',
+    800: '#66400B',
+    850: '#4D3008',
+    900: '#332006',
+    950: '#1A1003'
+};

package/dist/cjs/theme/palette/colors/purple.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "purple", {
+    enumerable: true,
+    get: ()=>purple
+});
+const purple = {
+    50: '#EFE9FD',
+    100: '#E0D2FC',
+    150: '#D0BCFA',
+    200: '#C1A6F8',
+    300: '#A179F5',
+    400: '#824DF1',
+    500: '#6320EE',
+    600: '#4F1ABE',
+    700: '#3B138F',
+    800: '#280D5F',
+    850: '#1E0A47',
+    900: '#140630',
+    950: '#0A0318'
+};

package/dist/cjs/theme/palette/colors/red.js

@@ -0,0 +1,35 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "red", {
+    enumerable: true,
+    get: ()=>red
+});
+const red = {
+    50: '#FDEDED',
+    100: '#FBDADA',
+    150: '#F9C8C8',
+    200: '#F7B5B5',
+    300: '#F29191',
+    400: '#EE6C6C',
+    500: '#EA4747',
+    600: '#BD3939',
+    700: '#902B2B',
+    800: '#621D1D',
+    850: '#4C1616',
+    900: '#350F0F',
+    950: '#1F0808'
+};

package/dist/cjs/theme/palette/colors/types.js

@@ -0,0 +1,16 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/theme/palette/error.js

@@ -0,0 +1,32 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "error", {
+    enumerable: true,
+    get: ()=>error
+});
+const _colors = require("./colors");
+const error = (mode)=>{
+    return mode === 'light' ? {
+        main: _colors.red[500],
+        dark: _colors.red[600],
+        light: _colors.red[50]
+    } : {
+        main: _colors.red[400],
+        dark: _colors.red[800],
+        light: _colors.red[300]
+    };
+};

package/dist/cjs/theme/palette/grey.js

@@ -0,0 +1,44 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "greyOption", {
+    enumerable: true,
+    get: ()=>greyOption
+});
+const _grey = require("./colors/grey");
+const greyOption = (mode)=>{
+    return mode === 'light' ? {
+        100: _grey.grey[100],
+        200: _grey.grey[200],
+        300: _grey.grey[300],
+        400: _grey.grey[400],
+        500: _grey.grey[500],
+        600: _grey.grey[600],
+        700: _grey.grey[700],
+        800: _grey.grey[800],
+        900: _grey.grey[900]
+    } : {
+        100: _grey.grey[900],
+        200: _grey.grey[800],
+        300: _grey.grey[700],
+        400: _grey.grey[600],
+        500: _grey.grey[500],
+        600: _grey.grey[400],
+        700: _grey.grey[300],
+        800: _grey.grey[200],
+        900: _grey.grey[100]
+    };
+};

package/dist/cjs/theme/palette/index.js

@@ -0,0 +1,28 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./palette-options"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}