@megafon/ui-lk-vas 0.3.0 → 0.5.0

package/dist/es/components/Charts/Chart/Chart.css

@@ -0,0 +1,73 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-chart {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 24px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 24px 32px 32px 32px;
+  border-radius: 12px;
+  background-color: var(--base);
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+.mfui-lkvas-chart__header {
+  display: grid;
+  grid-template-columns: 1fr auto minmax(-webkit-min-content, 1fr);
+  grid-template-columns: 1fr auto minmax(min-content, 1fr);
+  gap: 20px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+}
+.mfui-lkvas-chart__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  grid-column-start: 2;
+  text-align: center;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-lkvas-chart__title {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+.mfui-lkvas-chart__button {
+  grid-column-start: 3;
+  justify-self: end;
+}
+.mfui-lkvas-chart__image {
+  display: block;
+  width: 96px;
+  height: 96px;
+  background-image: url("./img/chart.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.mfui-lkvas-chart__empty-text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}

package/dist/es/components/Charts/Chart/Chart.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { IChart } from './types';
+import './Chart.scss';
+declare const Chart: React.FC<IChart>;
+export default Chart;

package/dist/es/components/Charts/Chart/Chart.js

@@ -0,0 +1,104 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { Button } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useCssVariable from "../../../hooks/useCssVariable";
+import ChartBar from "./components/_ChartBar/ChartBar";
+import ChartDoughnut from "./components/_ChartDoughnut/ChartDoughnut";
+import ChartLine from "./components/_ChartLine/ChartLine";
+import "./Chart.css";
+var DownloadIcon = function DownloadIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15.04 5.99L14.97 17l-1.26-1.49-1.42 1.41L15.37 20h1.26l3.08-3.08-1.42-1.41-1.32 1.55.07-11.05-2-.02z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 17H6a10 10 0 0020 0h-2a8 8 0 01-16 0z"
+  }));
+};
+var cn = cnCreate('mfui-lkvas-chart');
+var Chart = function Chart(_ref) {
+  var className = _ref.className,
+    type = _ref.type,
+    title = _ref.title,
+    labels = _ref.labels,
+    datasets = _ref.datasets,
+    scales = _ref.scales,
+    downloadLink = _ref.downloadLink,
+    _ref$hideLegend = _ref.hideLegend,
+    hideLegend = _ref$hideLegend === void 0 ? false : _ref$hideLegend,
+    dataAttrs = _ref.dataAttrs;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    bgColor = _React$useState2[0],
+    setBgColor = _React$useState2[1];
+  var rootRef = React.useRef(null);
+  var ticksColor = useCssVariable('--content');
+  var scaleColor = useCssVariable('--spbSky1');
+  var scalesColor = {
+    ticksColor: ticksColor,
+    scaleColor: scaleColor
+  };
+  var showChart = !!datasets.length && !!labels.length;
+  React.useEffect(function () {
+    if (type === 'doughnut' && rootRef.current) {
+      var rootNodeStyle = window.getComputedStyle(rootRef.current);
+      setBgColor(rootNodeStyle.getPropertyValue('background-color'));
+    }
+  }, [type]);
+  var renderChart = function renderChart() {
+    if (type === 'line') {
+      return /*#__PURE__*/React.createElement(ChartLine, {
+        type: type,
+        datasets: datasets,
+        labels: labels,
+        scales: scales,
+        hideLegend: hideLegend,
+        scalesColors: scalesColor
+      });
+    }
+    if (type === 'bar') {
+      return /*#__PURE__*/React.createElement(ChartBar, {
+        type: type,
+        datasets: datasets,
+        labels: labels,
+        scales: scales,
+        hideLegend: hideLegend,
+        scalesColors: scalesColor
+      });
+    }
+    return /*#__PURE__*/React.createElement(ChartDoughnut, {
+      type: type,
+      datasets: datasets,
+      labels: labels,
+      hideLegend: hideLegend,
+      bgColor: bgColor
+    });
+  };
+  var emptyContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: cn('image')
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('empty-text')
+  }, "\u0414\u0430\u043D\u043D\u044B\u0445 \u043D\u0435\u0442"));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn([className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('title')
+  }, title), !!downloadLink && /*#__PURE__*/React.createElement(Button, {
+    className: cn('button'),
+    theme: "green",
+    type: "text",
+    href: downloadLink,
+    download: true,
+    icon: /*#__PURE__*/React.createElement(DownloadIcon, null),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.downloadButton
+    }
+  }, "\u0421\u043A\u0430\u0447\u0430\u0442\u044C")), showChart ? renderChart() : emptyContent);
+};
+export default Chart;

package/dist/es/components/Charts/Chart/components/_ChartBar/ChartBar.css

@@ -0,0 +1,27 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-chart-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 24px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+}
+.mfui-lkvas-chart-bar__chart {
+  width: 100%;
+  height: 230px;
+  cursor: pointer;
+}

package/dist/es/components/Charts/Chart/components/_ChartBar/ChartBar.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IChart, IScalesColors } from '../../types';
+import './ChartBar.scss';
+interface IChartBar extends Pick<IChart, 'datasets' | 'labels' | 'hideLegend' | 'scales'> {
+    type: 'bar';
+    scalesColors: IScalesColors;
+}
+declare const ChartBar: React.FC<IChartBar>;
+export default ChartBar;

package/dist/es/components/Charts/Chart/components/_ChartBar/ChartBar.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.object.to-string.js";
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import ChartBase from "../_ChartBase/ChartBase";
+import ChartLegend from "../_ChartLegend/ChartLegend";
+import { CHART_BAR_COLORS, SCALES_COLORS, POINT_BORDER_COLOR } from "../chartColors";
+import "./ChartBar.css";
+var cn = cnCreate('mfui-lkvas-chart-bar');
+var ChartBar = function ChartBar(_ref) {
+  var type = _ref.type,
+    datasets = _ref.datasets,
+    labels = _ref.labels,
+    _ref$scales = _ref.scales,
+    _ref$scales2 = _ref$scales === void 0 ? {} : _ref$scales,
+    _ref$scales2$skipTick = _ref$scales2.skipTicksX,
+    skipTicksX = _ref$scales2$skipTick === void 0 ? 1 : _ref$scales2$skipTick,
+    _ref$scales2$skipTick2 = _ref$scales2.skipTicksY,
+    skipTicksY = _ref$scales2$skipTick2 === void 0 ? 1 : _ref$scales2$skipTick2,
+    _ref$hideLegend = _ref.hideLegend,
+    hideLegend = _ref$hideLegend === void 0 ? false : _ref$hideLegend,
+    _ref$scalesColors = _ref.scalesColors,
+    _ref$scalesColors$tic = _ref$scalesColors.ticksColor,
+    ticksColor = _ref$scalesColors$tic === void 0 ? SCALES_COLORS.ticks : _ref$scalesColors$tic,
+    _ref$scalesColors$sca = _ref$scalesColors.scaleColor,
+    scaleColor = _ref$scalesColors$sca === void 0 ? SCALES_COLORS.scale : _ref$scalesColors$sca;
+  var chartData = {
+    labels: labels,
+    datasets: datasets.map(function (dataset, index) {
+      return _extends(_extends({}, dataset), {
+        backgroundColor: CHART_BAR_COLORS[index],
+        categoryPercentage: 0.5,
+        pointBorderColor: POINT_BORDER_COLOR
+      });
+    })
+  };
+  var chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        display: true,
+        beginAtZero: true,
+        type: 'linear',
+        position: 'left',
+        grid: {
+          color: scaleColor
+        },
+        border: {
+          color: scaleColor
+        },
+        ticks: {
+          autoSkip: true,
+          maxRotation: 0,
+          color: ticksColor,
+          callback: function callback(value, index) {
+            return index % skipTicksY === 0 ? value : '';
+          }
+        }
+      },
+      x: {
+        grid: {
+          display: false
+        },
+        border: {
+          color: scaleColor
+        },
+        ticks: {
+          autoSkip: true,
+          maxRotation: 0,
+          color: ticksColor,
+          callback: function callback(_value, index) {
+            return index % skipTicksX === 0 ? labels[index] : '';
+          }
+        }
+      }
+    }
+  };
+  var legendItems = datasets.map(function (_ref2, index) {
+    var _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? '' : _ref2$label,
+      data = _ref2.data,
+      unit = _ref2.unit;
+    var sumValue = data.reduce(function (sum, current) {
+      return sum + current;
+    }, 0);
+    return {
+      title: label,
+      value: unit ? sumValue + unit : sumValue,
+      color: CHART_BAR_COLORS[index]
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('chart')
+  }, /*#__PURE__*/React.createElement(ChartBase, {
+    type: type,
+    data: chartData,
+    options: chartOptions
+  })), !hideLegend && /*#__PURE__*/React.createElement(ChartLegend, {
+    items: legendItems
+  }));
+};
+export default ChartBar;

package/dist/es/components/Charts/Chart/components/_ChartBase/ChartBase.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ChartOptions, ChartData, ChartType, UpdateMode } from 'chart.js';
+export interface IChartBase {
+    data: ChartData;
+    options: ChartOptions;
+    type: ChartType;
+    updateMode?: UpdateMode;
+    height?: number;
+    width?: number;
+}
+declare const ChartBase: React.FC<IChartBase>;
+export default ChartBase;

package/dist/es/components/Charts/Chart/components/_ChartBase/ChartBase.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import { ArcElement, BarController, BarElement, CategoryScale, Chart, DoughnutController, LinearScale, LineController, LineElement, PointElement, Tooltip } from 'chart.js';
+import setChartDefaultSettings from "./helpers";
+Chart.register(ArcElement, BarController, BarElement, CategoryScale, DoughnutController, LinearScale, LineController, LineElement, PointElement, Tooltip);
+setChartDefaultSettings();
+var cn = cnCreate('mfui-lkvas-chart-base');
+var ChartBase = function ChartBase(_ref) {
+  var data = _ref.data,
+    options = _ref.options,
+    type = _ref.type,
+    updateMode = _ref.updateMode,
+    height = _ref.height,
+    width = _ref.width;
+  var chartInstance = useRef(null);
+  useEffect(function () {
+    if (chartInstance.current) {
+      chartInstance.current.data = data;
+      chartInstance.current.options = options;
+      chartInstance.current.update(updateMode);
+    }
+  }, [data, options, updateMode]);
+  var nodeRef = useCallback(function (node) {
+    var _a;
+    (_a = chartInstance.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    if (node) {
+      chartInstance.current = new Chart(node, {
+        type: type,
+        data: data,
+        options: options
+      });
+    }
+  }, [data, options, type]);
+  return /*#__PURE__*/React.createElement("canvas", {
+    className: cn(),
+    ref: nodeRef,
+    height: height,
+    width: width
+  });
+};
+export default ChartBase;

package/dist/es/components/Charts/Chart/components/_ChartBase/helpers.d.ts

@@ -0,0 +1,2 @@
+declare const setChartDefaultSettings: () => void;
+export default setChartDefaultSettings;

package/dist/es/components/Charts/Chart/components/_ChartBase/helpers.js

@@ -0,0 +1,49 @@
+import { Chart } from 'chart.js';
+import { TOOLTIP_COLORS } from "../chartColors";
+var FONT_FAMILY = 'Graphik, Arial, sans-serif';
+var setChartDefaultSettings = function setChartDefaultSettings() {
+  Chart.defaults.responsive = true;
+  Chart.defaults.font.family = FONT_FAMILY;
+  Chart.defaults.scales.category.ticks.autoSkip = true;
+  Chart.defaults.scales.category.ticks.maxRotation = 0;
+  Chart.defaults.scales.category.ticks.font = {
+    size: 12
+  };
+  Chart.defaults.scales.linear.type = 'linear';
+  Chart.defaults.scales.linear.position = 'left';
+  Chart.defaults.scales.linear.beginAtZero = true;
+  Chart.defaults.scales.linear.ticks.autoSkip = true;
+  Chart.defaults.scales.linear.ticks.maxRotation = 0;
+  Chart.defaults.scales.linear.ticks.font = {
+    size: 12
+  };
+  Chart.defaults.plugins.tooltip.enabled = true;
+  Chart.defaults.plugins.tooltip.backgroundColor = TOOLTIP_COLORS.background;
+  Chart.defaults.plugins.tooltip.titleColor = TOOLTIP_COLORS.titleColor;
+  Chart.defaults.plugins.tooltip.titleFont = {
+    weight: '400'
+  };
+  Chart.defaults.plugins.tooltip.bodyFont = {
+    weight: '500'
+  };
+  Chart.defaults.plugins.tooltip.bodyAlign = 'left';
+  Chart.defaults.plugins.tooltip.padding = {
+    top: 8,
+    left: 12,
+    bottom: 6,
+    right: 12
+  };
+  Chart.defaults.plugins.tooltip.cornerRadius = 8;
+  Chart.defaults.plugins.tooltip.displayColors = true;
+  Chart.defaults.plugins.tooltip.boxWidth = 8;
+  Chart.defaults.plugins.tooltip.boxHeight = 8;
+  Chart.defaults.plugins.tooltip.boxPadding = 4;
+  Chart.defaults.plugins.tooltip.usePointStyle = true;
+  Chart.defaults.plugins.tooltip.callbacks.labelPointStyle = function () {
+    return {
+      pointStyle: 'circle',
+      rotation: 0
+    };
+  };
+};
+export default setChartDefaultSettings;

package/dist/es/components/Charts/Chart/components/_ChartDoughnut/ChartDoughnut.css

@@ -0,0 +1,26 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-chart-doughnut {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 24px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+}
+.mfui-lkvas-chart-doughnut__chart {
+  margin: -4px;
+  pointer-events: none;
+}

package/dist/es/components/Charts/Chart/components/_ChartDoughnut/ChartDoughnut.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IChart } from '../../types';
+import './ChartDoughnut.scss';
+interface IChartDoughnut extends Pick<IChart, 'datasets' | 'labels' | 'hideLegend'> {
+    type: 'doughnut';
+    bgColor?: string;
+}
+declare const ChartDoughnut: React.FC<IChartDoughnut>;
+export default ChartDoughnut;

package/dist/es/components/Charts/Chart/components/_ChartDoughnut/ChartDoughnut.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import ChartBase from "../_ChartBase/ChartBase";
+import ChartLegend from "../_ChartLegend/ChartLegend";
+import CHART_COLORS, { DOUGHNUT_BORDER_COLOR } from "../chartColors";
+import "./ChartDoughnut.css";
+var DOUGHNUT_SIZE = 220;
+var cn = cnCreate('mfui-lkvas-chart-doughnut');
+var ChartDoughnut = function ChartDoughnut(_ref) {
+  var type = _ref.type,
+    datasets = _ref.datasets,
+    labels = _ref.labels,
+    _ref$hideLegend = _ref.hideLegend,
+    hideLegend = _ref$hideLegend === void 0 ? false : _ref$hideLegend,
+    _ref$bgColor = _ref.bgColor,
+    bgColor = _ref$bgColor === void 0 ? DOUGHNUT_BORDER_COLOR : _ref$bgColor;
+  var _datasets = _slicedToArray(datasets, 1),
+    _datasets$ = _datasets[0],
+    data = _datasets$.data,
+    unit = _datasets$.unit;
+  var legendItems = data.map(function (value, index) {
+    return {
+      title: labels[index],
+      value: unit ? value + unit : value,
+      color: CHART_COLORS[index]
+    };
+  });
+  var chartData = {
+    labels: labels,
+    datasets: datasets.map(function (dataset) {
+      return _extends(_extends({}, dataset), {
+        backgroundColor: CHART_COLORS,
+        borderColor: bgColor,
+        borderWidth: 4
+      });
+    })
+  };
+  var chartOptions = {
+    events: [],
+    responsive: false,
+    cutout: 70,
+    plugins: {
+      tooltip: {
+        enabled: false
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('chart')
+  }, /*#__PURE__*/React.createElement(ChartBase, {
+    type: type,
+    data: chartData,
+    options: chartOptions,
+    height: DOUGHNUT_SIZE,
+    width: DOUGHNUT_SIZE
+  })), !hideLegend && /*#__PURE__*/React.createElement(ChartLegend, {
+    items: legendItems
+  }));
+};
+export default ChartDoughnut;

package/dist/es/components/Charts/Chart/components/_ChartLegend/ChartLegend.css

@@ -0,0 +1,58 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-chart-legend {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  gap: 12px;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--spbSky1);
+  border-radius: 12px;
+}
+.mfui-lkvas-chart-legend__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+}
+.mfui-lkvas-chart-legend__item-point {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-top: 6px;
+  border-radius: 50%;
+}
+.mfui-lkvas-chart-legend__item-title {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  display: block;
+}
+.mfui-lkvas-chart-legend__item-value {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  display: block;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-lkvas-chart-legend__item-value {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}

package/dist/es/components/Charts/Chart/components/_ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './ChartLegend.scss';
+export type ChartLegendItemType = {
+    title: string;
+    value: number | string;
+    color: string;
+};
+export interface IChartLegend {
+    items: ChartLegendItemType[];
+}
+declare const ChartLegend: React.FC<IChartLegend>;
+export default ChartLegend;

package/dist/es/components/Charts/Chart/components/_ChartLegend/ChartLegend.js

@@ -0,0 +1,29 @@
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./ChartLegend.css";
+var cn = cnCreate('mfui-lkvas-chart-legend');
+var ChartLegend = function ChartLegend(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, items.map(function (_ref2, index) {
+    var title = _ref2.title,
+      value = _ref2.value,
+      color = _ref2.color;
+    return /*#__PURE__*/React.createElement("div", {
+      key: title + index,
+      className: cn('item')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('item-point'),
+      style: {
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: cn('item-title')
+    }, title), !!value && /*#__PURE__*/React.createElement("span", {
+      className: cn('item-value')
+    }, value)));
+  }));
+};
+export default ChartLegend;

package/dist/es/components/Charts/Chart/components/_ChartLine/ChartLine.css

@@ -0,0 +1,27 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+
+.mfui-lkvas-chart-line {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 24px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+}
+.mfui-lkvas-chart-line__chart {
+  width: 100%;
+  height: 230px;
+  cursor: pointer;
+}

package/dist/es/components/Charts/Chart/components/_ChartLine/ChartLine.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IScalesColors, IChart } from '../../types';
+import './ChartLine.scss';
+interface IChartLine extends Pick<IChart, 'datasets' | 'labels' | 'hideLegend' | 'scales'> {
+    type: 'line';
+    scalesColors: IScalesColors;
+}
+declare const ChartLine: React.FC<IChartLine>;
+export default ChartLine;