@sis-cc/dotstatsuite-components 20.5.0 → 21.0.0

package/lib/viewer/src/app/table.js

@@ -1,300 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _ = require('../');
-
-var _2 = _interopRequireDefault(_);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var headerData = [{
-  data: [{ dimension: { label: 'Header 1' }, value: { label: 'H1 Value 1' } }, { dimension: { label: 'Header 2' }, value: { label: 'H2 Value 1' } }],
-  key: 'c1',
-  flags: [{ label: 'Column Flag' }]
-}, {
-  data: [{ dimension: { label: 'Header 1' }, value: { label: 'H1 Value 2', flags: [{ label: 'Column Value Flag' }] } }, { dimension: { label: 'Header 2' }, value: { label: 'H2 Value 2' } }],
-  key: 'c2',
-  flags: []
-}];
-
-var sectionsData = [[{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
-  key: 's1',
-  flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2' } }],
-  key: 'r2',
-  flags: []
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
-  key: 's2',
-  flags: []
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1' } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } }],
-  key: 'r2',
-  flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
-  key: 's3',
-  flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2' } }],
-  key: 'r2',
-  flags: []
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
-  key: 's4',
-  flags: []
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1' } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } }],
-  key: 'r2',
-  flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
-  key: 's5',
-  flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2' } }],
-  key: 'r2',
-  flags: []
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
-  key: 's6',
-  flags: []
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1' } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } }],
-  key: 'r2',
-  flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
-  key: 's7',
-  flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2' } }],
-  key: 'r2',
-  flags: []
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
-  key: 's8',
-  flags: []
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1' } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } }],
-  key: 'r2',
-  flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
-  key: 's9',
-  flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2' } }],
-  key: 'r2',
-  flags: []
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
-  key: 's10',
-  flags: []
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1' } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } }],
-  key: 'r2',
-  flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 1' } }],
-  key: 's11',
-  flags: [{ label: 'Sectionwiuefhw iuefhwiuefhqwieurwiuergwieurg' }, { label: 'Flag' }]
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1', parents: ['a', 'b'], flags: [{ label: 'Row Value Flag' }] } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2' } }],
-  key: 'r2',
-  flags: []
-}]], [{
-  data: [{ dimension: { label: 'Section' }, value: { label: 'S Value 2', flags: [{ code: 'Y', label: 'Section Value Flag' }] } }],
-  key: 's12',
-  flags: []
-}, [{
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 1' } }],
-  key: 'r1',
-  flags: []
-}, {
-  data: [{ dimension: { label: 'Row' }, value: { label: 'R Value 2', parents: ['a'] } }],
-  key: 'r2',
-  flags: [{ label: 'Row' }, { label: 'Flags', code: 'R' }]
-}]]];
-
-var cells = {
-  c1: {
-    s1: {
-      r1: [{ value: 0, flags: [] }],
-      r2: [{ value: 1, flags: [] }]
-    },
-    s2: {
-      r1: [{ value: 2, flags: [] }],
-      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
-    },
-    s3: {
-      r1: [{ value: 0, flags: [] }],
-      r2: [{ value: 1, flags: [] }]
-    },
-    s4: {
-      r1: [{ value: 2, flags: [] }],
-      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
-    },
-    s5: {
-      r1: [{ value: 0, flags: [] }],
-      r2: [{ value: 1, flags: [] }]
-    },
-    s6: {
-      r1: [{ value: 2, flags: [] }],
-      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
-    },
-    s7: {
-      r1: [{ value: 0, flags: [] }],
-      r2: [{ value: 1, flags: [] }]
-    },
-    s8: {
-      r1: [{ value: 2, flags: [] }],
-      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
-    },
-    s9: {
-      r1: [{ value: 0, flags: [] }],
-      r2: [{ value: 1, flags: [] }]
-    },
-    s10: {
-      r1: [{ value: 2, flags: [] }],
-      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
-    },
-    s11: {
-      r1: [{ value: 0, flags: [] }],
-      r2: [{ value: 1, flags: [] }]
-    },
-    s12: {
-      r1: [{ value: 2, flags: [] }],
-      r2: [{ value: 3, flags: [{ label: 'some flag' }, { code: 'PP', label: 'other flag' }] }]
-    }
-  },
-  c2: {
-    s1: {
-      r1: [{ value: 4, flags: [] }],
-      r2: [{ value: 5, flags: [] }]
-    },
-    s2: {
-      r1: [{ value: 6, flags: [] }],
-      r2: [{ value: 7, flags: [] }]
-    },
-    s3: {
-      r1: [{ value: 4, flags: [] }],
-      r2: [{ value: 5, flags: [] }]
-    },
-    s4: {
-      r1: [{ value: 6, flags: [] }],
-      r2: [{ value: 7, flags: [] }]
-    },
-    s5: {
-      r1: [{ value: 4, flags: [] }],
-      r2: [{ value: 5, flags: [] }]
-    },
-    s6: {
-      r1: [{ value: 6, flags: [] }],
-      r2: [{ value: 7, flags: [] }]
-    },
-    s7: {
-      r1: [{ value: 4, flags: [] }],
-      r2: [{ value: 5, flags: [] }]
-    },
-    s8: {
-      r1: [{ value: 6, flags: [] }],
-      r2: [{ value: 7, flags: [] }]
-    },
-    s9: {
-      r1: [{ value: 4, flags: [] }],
-      r2: [{ value: 5, flags: [] }]
-    },
-    s10: {
-      r1: [{ value: 6, flags: [] }],
-      r2: [{ value: 7, flags: [] }]
-    },
-    s11: {
-      r1: [{ value: 4, flags: [] }],
-      r2: [{ value: 5, flags: [] }]
-    },
-    s12: {
-      r1: [{ value: 6, flags: [] }],
-      r2: [{ value: 7, flags: [] }]
-    }
-  }
-};
-
-exports.default = function (_ref) {
-  var config = _ref.config,
-      style = _ref.style,
-      options = _ref.options,
-      isRtl = _ref.isRtl;
-
-  var footerProps = config;
-  var headerProps = {
-    title: { label: 'Table Data' }
-  };
-  var tableProps = { headerData: headerData, sectionsData: sectionsData, cells: cells };
-  return _react2.default.createElement(
-    'div',
-    { style: style },
-    _react2.default.createElement(_2.default, {
-      tableProps: tableProps,
-      headerProps: headerProps,
-      footerProps: footerProps,
-      type: 'table',
-      isRtl: isRtl
-    })
-  );
-};

package/lib/viewer/src/app/use-case-1.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _ramda = require('ramda');
-
-var R = _interopRequireWildcard(_ramda);
-
-var _ = require('../');
-
-var _2 = _interopRequireDefault(_);
-
-var _row = require('../../mocks/row');
-
-var _row2 = _interopRequireDefault(_row);
-
-var _src = require('../../../rules/src');
-
-var _oecdHEALTH_PROT = require('../../../rules/test/oecd-HEALTH_PROT.json');
-
-var _oecdHEALTH_PROT2 = _interopRequireDefault(_oecdHEALTH_PROT);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-//import stackData from '../../mocks/stack';
-exports.default = function (_ref) {
-  var config = _ref.config,
-      style = _ref.style,
-      options = _ref.options;
-
-  var type = 'StackedRowChart';
-  var stackSeries = (0, _src.series)(_oecdHEALTH_PROT2.default, type, null, { mode: 'percent', limit: 5 }, null, null, null);
-  return _react2.default.createElement(_2.default, {
-    headerProps: {
-      title: { label: 'Science performance (PISA)' },
-      subtitle: [{ label: 'Mean score 2015, Annual incl. OECD, all countries, and to make it longer' }]
-    },
-    footerProps: {
-      logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/200px-OECD_logo_new.svg.png',
-      copyright: { label: '© OECD', content: "Copyright: terms" },
-      source: {
-        label: "Labour force by educational attainment",
-        link: "data.oecd.org"
-      }
-    },
-    chartData: { series: stackSeries },
-    chartOptions: {
-      base: { height: 700 }
-    },
-    type: type
-  });
-};

package/lib/viewer/src/app/use-case-2.js

@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _ramda = require('ramda');
-
-var R = _interopRequireWildcard(_ramda);
-
-var _ = require('../');
-
-var _2 = _interopRequireDefault(_);
-
-var _row = require('../../mocks/row');
-
-var _row2 = _interopRequireDefault(_row);
-
-var _bar = require('../../mocks/bar');
-
-var _bar2 = _interopRequireDefault(_bar);
-
-var _scatter = require('../../mocks/scatter');
-
-var _scatter2 = _interopRequireDefault(_scatter);
-
-var _gppTime = require('../../mocks/gpp-time');
-
-var _gppTime2 = _interopRequireDefault(_gppTime);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = function (_ref) {
-  var config = _ref.config,
-      style = _ref.style,
-      options = _ref.options;
-
-  var style1 = (0, _extends3.default)({}, style, {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-around'
-  });
-
-  var style2 = {
-    width: 500,
-    height: 500,
-    padding: 10
-  };
-
-  return _react2.default.createElement(
-    'div',
-    { style: style1 },
-    _react2.default.createElement(
-      'div',
-      { style: style2 },
-      _react2.default.createElement(_2.default, (0, _extends3.default)({ chartOptions: options, type: 'RowChart' }, (0, _row2.default)()))
-    ),
-    _react2.default.createElement(
-      'div',
-      { style: style2 },
-      _react2.default.createElement(_2.default, (0, _extends3.default)({ chartOptions: options, type: 'BarChart' }, (0, _bar2.default)()))
-    ),
-    _react2.default.createElement(
-      'div',
-      { style: style2 },
-      _react2.default.createElement(_2.default, (0, _extends3.default)({ chartOptions: options, type: 'ScatterChart' }, (0, _scatter2.default)()))
-    )
-  );
-};

package/lib/viewer/src/app/use-case-3.js

@@ -1,52 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _ramda = require('ramda');
-
-var R = _interopRequireWildcard(_ramda);
-
-var _ = require('../');
-
-var _2 = _interopRequireDefault(_);
-
-var _row = require('../../mocks/row');
-
-var _row2 = _interopRequireDefault(_row);
-
-var _stack = require('../../mocks/stack');
-
-var _stack2 = _interopRequireDefault(_stack);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = function (_ref) {
-  var options = _ref.options;
-
-  return _react2.default.createElement(
-    'div',
-    { style: { display: 'flex' } },
-    _react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(_2.default, (0, _extends3.default)({}, (0, _row2.default)(), { chartOptions: options, type: 'RowChart' }))
-    ),
-    _react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(_2.default, (0, _extends3.default)({}, (0, _stack2.default)(), { chartOptions: options, type: 'StackedBarChart' }))
-    )
-  );
-};

package/lib/viewer/src/app.js

@@ -1,162 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
-
-var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styles = require('@mui/material/styles');
-
-var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
-
-var _useCase = require('./app/use-case-1');
-
-var _useCase2 = _interopRequireDefault(_useCase);
-
-var _table = require('./app/table');
-
-var _table2 = _interopRequireDefault(_table);
-
-var _oneTableCell = require('./app/one-table-cell');
-
-var _oneTableCell2 = _interopRequireDefault(_oneTableCell);
-
-var _useCase3 = require('./app/use-case-2');
-
-var _useCase4 = _interopRequireDefault(_useCase3);
-
-var _useCase5 = require('./app/use-case-3');
-
-var _useCase6 = _interopRequireDefault(_useCase5);
-
-var _nodataRes = require('./app/nodata-res');
-
-var _nodataRes2 = _interopRequireDefault(_nodataRes);
-
-var _nodataSized = require('./app/nodata-sized');
-
-var _nodataSized2 = _interopRequireDefault(_nodataSized);
-
-var _leg = require('./app/leg');
-
-var _leg2 = _interopRequireDefault(_leg);
-
-var _ = require('.');
-
-var _2 = _interopRequireDefault(_);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var AppTab = function AppTab(_ref) {
-  var label = _ref.label,
-      iconName = _ref.iconName;
-  return _react2.default.createElement(
-    Tooltip,
-    { content: label, position: Position.RIGHT },
-    _react2.default.createElement(Icon, { iconName: iconName })
-  );
-};
-
-exports.default = function () {
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
-      isRtl = _useState2[0],
-      setRtl = _useState2[1];
-
-  var theme = (0, _styles.createTheme)((0, _dotstatsuiteVisions.sisccTheme)({ rtl: isRtl ? 'rtl' : 'ltr' }));
-
-  var config = {
-    logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/200px-OECD_logo_new.svg.png',
-    owner: '©OECD',
-    terms: { label: 'Terms & Conditions', link: 'https://www.oecd.org/termsandconditions/' }
-  };
-
-  var style = {
-    height: 'calc(100vh - 70px)'
-  };
-
-  var options = {
-    base: { height: 500 },
-    axis: {
-      x: {
-        linear: {
-          step: 5,
-          max: 20
-        }
-      },
-      y: {
-        linear: {
-          step: 5,
-          max: 20
-        }
-      }
-    }
-  };
-
-  /*
-  
-  <Tab2
-              id="uc3"
-              title={<AppTab label="fluid width" iconName="fullscreen" />}
-              panel={<UseCase3 isRtl={isRtl} config={config} style={style} options={options} />}
-            />
-            <Tab2
-              id="uc1"
-              title={<AppTab label="full screen resizable chart" iconName="fullscreen" />}
-              panel={<UseCase1 isRtl={isRtl} config={config} style={style} options={options} />}
-            />
-            <Tab2
-              id="table0"
-              title={<AppTab label="table" iconName="fullscreen" />}
-              panel={<TableCase isRtl={isRtl} config={config} style={style} />}
-            />
-            <Tab2
-              id="table1"
-              title={<AppTab label="table one cell" iconName="fullscreen" />}
-              panel={<TableOneCell isRtl={isRtl} config={config} style={style} />}
-            />
-            <Tab2
-              id="uc2"
-              title={<AppTab label="responsive fixed slot dashboard" iconName="grid-view" />}
-              panel={<UseCase2 isRtl={isRtl} config={config} style={style} options={options} />}
-            />
-            <Tab2
-              id="leg"
-              title={<AppTab label="legacy should still work like a charm" iconName="comparison" />}
-              panel={<Legacy isRtl={isRtl} config={config} />}
-            />
-            <Tab2
-              id="unsized-nodata"
-              title={<AppTab label="Unsized No Data Chart" iconName="fullscreen" />}
-              panel={<ResNoDataCase isRtl={isRtl} config={config} />}
-            />
-            <Tab2
-              id="sized-nodata"
-              title={<AppTab label="Sized No Data Chart" iconName="fullscreen" />}
-              panel={<SizedNoDataCase isRtl={isRtl} config={config} />}
-            />
-  
-  */
-
-  return {/* <div style={{ padding: 10 }}>
-           <StyledEngineProvider injectFirst>
-             <ThemeProvider theme={theme}>
-           <button onClick={() => setRtl(!isRtl)}>{isRtl ? 'left to right' : 'right to left'}</button>
-           <Tabs2 renderActiveTabPanelOnly={false}>
-             <Tab2
-               id="uc1"
-               title={<AppTab label="full screen resizable chart" iconName="fullscreen" />}
-               panel={<UseCase1 isRtl={isRtl} config={config} style={style} options={options} />}
-             />
-           </Tabs2>
-           </ThemeProvider>
-           </StyledEngineProvider>
-          </div> */};
-};