@oanda/labs-widget-common 1.0.196 → 1.0.198

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +1556 -0
  2. package/dist/main/chart/BaseChart.js +35 -0
  3. package/dist/main/chart/BaseChart.js.map +1 -0
  4. package/dist/main/chart/index.js +22 -0
  5. package/dist/main/chart/index.js.map +1 -1
  6. package/dist/main/chart/types.js +6 -0
  7. package/dist/main/chart/types.js.map +1 -0
  8. package/dist/main/components/Error/Error.js +5 -2
  9. package/dist/main/components/Error/Error.js.map +1 -1
  10. package/dist/main/components/Table/Table.js +5 -2
  11. package/dist/main/components/Table/Table.js.map +1 -1
  12. package/dist/main/translations/sources/en.json +1 -0
  13. package/dist/module/chart/BaseChart.js +26 -0
  14. package/dist/module/chart/BaseChart.js.map +1 -0
  15. package/dist/module/chart/index.js +2 -0
  16. package/dist/module/chart/index.js.map +1 -1
  17. package/dist/module/chart/types.js +2 -0
  18. package/dist/module/chart/types.js.map +1 -0
  19. package/dist/module/components/Error/Error.js +5 -2
  20. package/dist/module/components/Error/Error.js.map +1 -1
  21. package/dist/module/components/Table/Table.js +5 -2
  22. package/dist/module/components/Table/Table.js.map +1 -1
  23. package/dist/module/translations/sources/en.json +1 -0
  24. package/dist/types/chart/BaseChart.d.ts +7 -0
  25. package/dist/types/chart/index.d.ts +2 -0
  26. package/dist/types/chart/types.d.ts +2 -0
  27. package/dist/types/components/Error/Error.d.ts +3 -1
  28. package/package.json +2 -2
  29. package/src/chart/BaseChart.tsx +37 -0
  30. package/src/chart/index.ts +2 -0
  31. package/src/chart/types.ts +3 -0
  32. package/src/components/Error/Error.tsx +8 -2
  33. package/src/components/Table/Table.tsx +6 -2
  34. package/src/translations/sources/en.json +1 -0
  35. package/test/chart/BaseChart.test.tsx +121 -0
  36. package/test/setup.ts +16 -0
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.BaseChart = void 0;
7
+ var _core = _interopRequireDefault(require("echarts-for-react/lib/core"));
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
10
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
11
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
13
+ const BaseChart = exports.BaseChart = (0, _react.forwardRef)((_ref, ref) => {
14
+ let {
15
+ isDark,
16
+ chartHeight,
17
+ ...props
18
+ } = _ref;
19
+ const [ready, setReady] = (0, _react.useState)(false);
20
+ (0, _react.useEffect)(() => {
21
+ void document.fonts.ready.then(() => setReady(true));
22
+ }, []);
23
+ return _react.default.createElement(_core.default, _extends({}, props, {
24
+ ref: ref,
25
+ "data-testid": "charts-container",
26
+ showLoading: !ready,
27
+ style: {
28
+ height: `${chartHeight}px`,
29
+ width: '100%'
30
+ },
31
+ theme: isDark ? 'dark_theme' : 'light_theme'
32
+ }));
33
+ });
34
+ BaseChart.displayName = 'BaseChart';
35
+ //# sourceMappingURL=BaseChart.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseChart.js","names":["_core","_interopRequireDefault","require","_react","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BaseChart","exports","forwardRef","_ref","ref","isDark","chartHeight","props","ready","setReady","useState","useEffect","document","fonts","then","createElement","showLoading","style","height","width","theme","displayName"],"sources":["../../../src/chart/BaseChart.tsx"],"sourcesContent":["import ReactEChartsCore from 'echarts-for-react/lib/core';\nimport type { EChartsReactProps } from 'echarts-for-react/lib/types';\nimport React, { forwardRef, useEffect, useState } from 'react';\n\nimport type { BaseChartRef } from './types';\n\ntype BaseChartProps = EChartsReactProps & {\n isDark: boolean;\n chartHeight: number;\n};\n\nexport const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(\n ({ isDark, chartHeight, ...props }, ref) => {\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n void document.fonts.ready.then(() => setReady(true));\n }, []);\n\n return (\n <ReactEChartsCore\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n ref={ref}\n data-testid=\"charts-container\"\n showLoading={!ready}\n style={{\n height: `${chartHeight}px`,\n width: '100%',\n }}\n theme={isDark ? 'dark_theme' : 'light_theme'}\n />\n );\n }\n);\n\nBaseChart.displayName = 'BaseChart';\n"],"mappings":"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","ignoreList":[]}
@@ -3,6 +3,17 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ var _BaseChart = require("./BaseChart");
7
+ Object.keys(_BaseChart).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _BaseChart[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _BaseChart[key];
14
+ }
15
+ });
16
+ });
6
17
  var _getGridLines = require("./getGridLines");
7
18
  Object.keys(_getGridLines).forEach(function (key) {
8
19
  if (key === "default" || key === "__esModule") return;
@@ -47,4 +58,15 @@ Object.keys(_sharedOptions).forEach(function (key) {
47
58
  }
48
59
  });
49
60
  });
61
+ var _types = require("./types");
62
+ Object.keys(_types).forEach(function (key) {
63
+ if (key === "default" || key === "__esModule") return;
64
+ if (key in exports && exports[key] === _types[key]) return;
65
+ Object.defineProperty(exports, key, {
66
+ enumerable: true,
67
+ get: function () {
68
+ return _types[key];
69
+ }
70
+ });
71
+ });
50
72
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_getGridLines","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_getTheme","_getZoomControls","_sharedOptions"],"sources":["../../../src/chart/index.ts"],"sourcesContent":["export * from './getGridLines';\nexport * from './getTheme';\nexport * from './getZoomControls';\nexport * from './sharedOptions';\n"],"mappings":";;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,aAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,aAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,aAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,SAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,SAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,SAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,SAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,gBAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,gBAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,gBAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,gBAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,cAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,cAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,cAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,cAAA,CAAAP,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_BaseChart","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_getGridLines","_getTheme","_getZoomControls","_sharedOptions","_types"],"sources":["../../../src/chart/index.ts"],"sourcesContent":["export * from './BaseChart';\nexport * from './getGridLines';\nexport * from './getTheme';\nexport * from './getZoomControls';\nexport * from './sharedOptions';\nexport * from './types';\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,UAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,UAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,aAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,aAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,aAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,aAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,SAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,SAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,SAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,SAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,gBAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,gBAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,gBAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,gBAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,cAAA,GAAAZ,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAU,cAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,cAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,cAAA,CAAAR,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,MAAA,GAAAb,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAW,MAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAS,MAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAK,MAAA,CAAAT,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","names":[],"sources":["../../../src/chart/types.ts"],"sourcesContent":["import type ReactEChartsCore from 'echarts-for-react/lib/core';\n\nexport type BaseChartRef = ReactEChartsCore;\n"],"mappings":"","ignoreList":[]}
@@ -10,7 +10,10 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _images = require("../../images");
11
11
  var _providers = require("../../providers");
12
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
- const ChartError = () => {
13
+ const ChartError = _ref => {
14
+ let {
15
+ errorType = 'dataUnavailable'
16
+ } = _ref;
14
17
  const {
15
18
  lang
16
19
  } = (0, _monoI18n.useLocale)();
@@ -25,7 +28,7 @@ const ChartError = () => {
25
28
  "data-testid": "chart-error"
26
29
  }, _react.default.createElement(_images.ChartErrorIcon, null), _react.default.createElement("span", {
27
30
  className: "lw-mt-3 lw-font-sans lw-uppercase"
28
- }, lang('data_unavailable')));
31
+ }, errorType === 'dataUnavailable' ? lang('data_unavailable') : lang('no_matching_results')));
29
32
  };
30
33
  exports.ChartError = ChartError;
31
34
  const Error = () => {
@@ -1 +1 @@
1
- {"version":3,"file":"Error.js","names":["_monoI18n","require","_classnames","_interopRequireDefault","_react","_images","_providers","e","__esModule","default","ChartError","lang","useLocale","isDark","useLayoutProvider","createElement","className","classnames","ChartErrorIcon","exports","Error","ErrorIcon","WidgetError"],"sources":["../../../../src/components/Error/Error.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport { ChartErrorIcon, ErrorIcon } from '../../images';\nimport { useLayoutProvider } from '../../providers';\n\nconst ChartError = () => {\n const { lang } = useLocale();\n const { isDark } = useLayoutProvider();\n\n return (\n <div\n className={classnames(\n 'lw-flex lw-flex-1 lw-flex-col lw-items-center lw-justify-center lw-stroke-2',\n {\n 'lw-text-text-primary': isDark,\n 'lw-text-text-secondary': !isDark,\n }\n )}\n data-testid=\"chart-error\"\n >\n <ChartErrorIcon />\n <span className=\"lw-mt-3 lw-font-sans lw-uppercase\">\n {lang('data_unavailable')}\n </span>\n </div>\n );\n};\n\nconst Error = () => {\n const { lang } = useLocale();\n const { isDark } = useLayoutProvider();\n\n return (\n <div\n className={classnames(\n 'lw-flex lw-items-center lw-justify-center lw-gap-1',\n {\n 'lw-text-text-primary': isDark,\n 'lw-text-text-secondary': !isDark,\n }\n )}\n data-testid=\"error\"\n >\n <ErrorIcon />\n <span className=\"lw-font-sans lw-text-xs lw-uppercase\">\n {lang('data_unavailable')}\n </span>\n </div>\n );\n};\n\nconst WidgetError = () => (\n <div\n className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\"\n data-testid=\"widget-error\"\n >\n <ChartError />\n </div>\n);\n\nexport { ChartError, Error, WidgetError };\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAAoD,SAAAE,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpD,MAAMG,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,4BAAiB,EAAC,CAAC;EAEtC,OACEV,MAAA,CAAAK,OAAA,CAAAM,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EACnB,6EAA6E,EAC7E;MACE,sBAAsB,EAAEJ,MAAM;MAC9B,wBAAwB,EAAE,CAACA;IAC7B,CACF,CAAE;IACF,eAAY;EAAa,GAEzBT,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACV,OAAA,CAAAa,cAAc,MAAE,CAAC,EAClBd,MAAA,CAAAK,OAAA,CAAAM,aAAA;IAAMC,SAAS,EAAC;EAAmC,GAChDL,IAAI,CAAC,kBAAkB,CACpB,CACH,CAAC;AAEV,CAAC;AAACQ,OAAA,CAAAT,UAAA,GAAAA,UAAA;AAEF,MAAMU,KAAK,GAAGA,CAAA,KAAM;EAClB,MAAM;IAAET;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,4BAAiB,EAAC,CAAC;EAEtC,OACEV,MAAA,CAAAK,OAAA,CAAAM,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EACnB,oDAAoD,EACpD;MACE,sBAAsB,EAAEJ,MAAM;MAC9B,wBAAwB,EAAE,CAACA;IAC7B,CACF,CAAE;IACF,eAAY;EAAO,GAEnBT,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACV,OAAA,CAAAgB,SAAS,MAAE,CAAC,EACbjB,MAAA,CAAAK,OAAA,CAAAM,aAAA;IAAMC,SAAS,EAAC;EAAsC,GACnDL,IAAI,CAAC,kBAAkB,CACpB,CACH,CAAC;AAEV,CAAC;AAACQ,OAAA,CAAAC,KAAA,GAAAA,KAAA;AAEF,MAAME,WAAW,GAAGA,CAAA,KAClBlB,MAAA,CAAAK,OAAA,CAAAM,aAAA;EACEC,SAAS,EAAC,mGAAmG;EAC7G,eAAY;AAAc,GAE1BZ,MAAA,CAAAK,OAAA,CAAAM,aAAA,CAACL,UAAU,MAAE,CACV,CACN;AAACS,OAAA,CAAAG,WAAA,GAAAA,WAAA","ignoreList":[]}
1
+ {"version":3,"file":"Error.js","names":["_monoI18n","require","_classnames","_interopRequireDefault","_react","_images","_providers","e","__esModule","default","ChartError","_ref","errorType","lang","useLocale","isDark","useLayoutProvider","createElement","className","classnames","ChartErrorIcon","exports","Error","ErrorIcon","WidgetError"],"sources":["../../../../src/components/Error/Error.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport { ChartErrorIcon, ErrorIcon } from '../../images';\nimport { useLayoutProvider } from '../../providers';\n\nconst ChartError = ({\n errorType = 'dataUnavailable',\n}: {\n errorType?: 'dataUnavailable' | 'noMatchingResults';\n}) => {\n const { lang } = useLocale();\n const { isDark } = useLayoutProvider();\n\n return (\n <div\n className={classnames(\n 'lw-flex lw-flex-1 lw-flex-col lw-items-center lw-justify-center lw-stroke-2',\n {\n 'lw-text-text-primary': isDark,\n 'lw-text-text-secondary': !isDark,\n }\n )}\n data-testid=\"chart-error\"\n >\n <ChartErrorIcon />\n <span className=\"lw-mt-3 lw-font-sans lw-uppercase\">\n {errorType === 'dataUnavailable'\n ? lang('data_unavailable')\n : lang('no_matching_results')}\n </span>\n </div>\n );\n};\n\nconst Error = () => {\n const { lang } = useLocale();\n const { isDark } = useLayoutProvider();\n\n return (\n <div\n className={classnames(\n 'lw-flex lw-items-center lw-justify-center lw-gap-1',\n {\n 'lw-text-text-primary': isDark,\n 'lw-text-text-secondary': !isDark,\n }\n )}\n data-testid=\"error\"\n >\n <ErrorIcon />\n <span className=\"lw-font-sans lw-text-xs lw-uppercase\">\n {lang('data_unavailable')}\n </span>\n </div>\n );\n};\n\nconst WidgetError = () => (\n <div\n className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\"\n data-testid=\"widget-error\"\n >\n <ChartError />\n </div>\n);\n\nexport { ChartError, Error, WidgetError };\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAAoD,SAAAE,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpD,MAAMG,UAAU,GAAGC,IAAA,IAIb;EAAA,IAJc;IAClBC,SAAS,GAAG;EAGd,CAAC,GAAAD,IAAA;EACC,MAAM;IAAEE;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,4BAAiB,EAAC,CAAC;EAEtC,OACEZ,MAAA,CAAAK,OAAA,CAAAQ,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EACnB,6EAA6E,EAC7E;MACE,sBAAsB,EAAEJ,MAAM;MAC9B,wBAAwB,EAAE,CAACA;IAC7B,CACF,CAAE;IACF,eAAY;EAAa,GAEzBX,MAAA,CAAAK,OAAA,CAAAQ,aAAA,CAACZ,OAAA,CAAAe,cAAc,MAAE,CAAC,EAClBhB,MAAA,CAAAK,OAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAmC,GAChDN,SAAS,KAAK,iBAAiB,GAC5BC,IAAI,CAAC,kBAAkB,CAAC,GACxBA,IAAI,CAAC,qBAAqB,CAC1B,CACH,CAAC;AAEV,CAAC;AAACQ,OAAA,CAAAX,UAAA,GAAAA,UAAA;AAEF,MAAMY,KAAK,GAAGA,CAAA,KAAM;EAClB,MAAM;IAAET;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,4BAAiB,EAAC,CAAC;EAEtC,OACEZ,MAAA,CAAAK,OAAA,CAAAQ,aAAA;IACEC,SAAS,EAAE,IAAAC,mBAAU,EACnB,oDAAoD,EACpD;MACE,sBAAsB,EAAEJ,MAAM;MAC9B,wBAAwB,EAAE,CAACA;IAC7B,CACF,CAAE;IACF,eAAY;EAAO,GAEnBX,MAAA,CAAAK,OAAA,CAAAQ,aAAA,CAACZ,OAAA,CAAAkB,SAAS,MAAE,CAAC,EACbnB,MAAA,CAAAK,OAAA,CAAAQ,aAAA;IAAMC,SAAS,EAAC;EAAsC,GACnDL,IAAI,CAAC,kBAAkB,CACpB,CACH,CAAC;AAEV,CAAC;AAACQ,OAAA,CAAAC,KAAA,GAAAA,KAAA;AAEF,MAAME,WAAW,GAAGA,CAAA,KAClBpB,MAAA,CAAAK,OAAA,CAAAQ,aAAA;EACEC,SAAS,EAAC,mGAAmG;EAC7G,eAAY;AAAc,GAE1Bd,MAAA,CAAAK,OAAA,CAAAQ,aAAA,CAACP,UAAU,MAAE,CACV,CACN;AAACW,OAAA,CAAAG,WAAA,GAAAA,WAAA","ignoreList":[]}
@@ -26,6 +26,7 @@ function Table(_ref) {
26
26
  const onScroll = event => {
27
27
  setIsScrolled(event.currentTarget.scrollLeft > 0);
28
28
  };
29
+ const isEmptyData = records.length === 0;
29
30
  return _react.default.createElement("div", {
30
31
  className: "lw-relative lw-overflow-x-auto",
31
32
  onScroll: onScroll
@@ -36,11 +37,13 @@ function Table(_ref) {
36
37
  columns: headerConfig,
37
38
  isError: !!isError,
38
39
  isScrolled: isScrolled
39
- }), !isError && _react.default.createElement("tbody", null, _react.default.createElement(_react.default.Fragment, null, records.map((record, index) => renderRow(record, index, isScrolled))))), isError && _react.default.createElement("div", {
40
+ }), !isError && _react.default.createElement("tbody", null, _react.default.createElement(_react.default.Fragment, null, records.map((record, index) => renderRow(record, index, isScrolled))))), (isError || isEmptyData) && _react.default.createElement("div", {
40
41
  className: (0, _classnames.default)('lw-sticky lw-left-0 lw-top-0 lw-flex lw-h-[250px] lw-w-full lw-items-center lw-justify-center lw-border-t lw-border-t-border-primary', {
41
42
  'lw-bg-bg-primary': isDark,
42
43
  'lw-bg-bg-secondary': !isDark
43
44
  })
44
- }, _react.default.createElement(_Error.ChartError, null)));
45
+ }, _react.default.createElement(_Error.ChartError, {
46
+ errorType: isEmptyData ? 'noMatchingResults' : undefined
47
+ })));
45
48
  }
46
49
  //# sourceMappingURL=Table.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","names":["_classnames","_interopRequireDefault","require","_react","_interopRequireWildcard","_providers","_Error","_TableHeader","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Table","_ref","records","headerConfig","renderRow","isError","isDark","useLayoutProvider","isScrolled","setIsScrolled","useState","onScroll","event","currentTarget","scrollLeft","createElement","className","TableHeader","columns","Fragment","map","record","index","classnames","ChartError"],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { SyntheticEvent } from 'react';\nimport React, { useState } from 'react';\n\nimport { useLayoutProvider } from '../../providers';\nimport { ChartError } from '../Error';\nimport { TableHeader } from './TableHeader';\nimport type { TableProps } from './types';\n\nfunction Table<T>({\n records,\n headerConfig,\n renderRow,\n isError,\n}: TableProps<T>) {\n const { isDark } = useLayoutProvider();\n const [isScrolled, setIsScrolled] = useState(false);\n\n const onScroll = (event: SyntheticEvent<HTMLDivElement>) => {\n setIsScrolled(event.currentTarget.scrollLeft > 0);\n };\n\n return (\n <div className=\"lw-relative lw-overflow-x-auto\" onScroll={onScroll}>\n <table className=\"lw-w-full lw-border-collapse\" data-testid=\"table\">\n <TableHeader\n columns={headerConfig}\n isError={!!isError}\n isScrolled={isScrolled}\n />\n {!isError && (\n <tbody>\n <>\n {records.map((record, index) =>\n renderRow(record, index, isScrolled)\n )}\n </>\n </tbody>\n )}\n </table>\n {isError && (\n <div\n className={classnames(\n 'lw-sticky lw-left-0 lw-top-0 lw-flex lw-h-[250px] lw-w-full lw-items-center lw-justify-center lw-border-t lw-border-t-border-primary',\n {\n 'lw-bg-bg-primary': isDark,\n 'lw-bg-bg-secondary': !isDark,\n }\n )}\n >\n <ChartError />\n </div>\n )}\n </div>\n );\n}\n\nexport { Table };\n"],"mappings":";;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AAA4C,SAAAM,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAhB,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAI,UAAA,GAAAJ,CAAA,KAAAK,OAAA,EAAAL,CAAA;AAG5C,SAASmB,KAAKA,CAAAC,IAAA,EAKI;EAAA,IALA;IAChBC,OAAO;IACPC,YAAY;IACZC,SAAS;IACTC;EACa,CAAC,GAAAJ,IAAA;EACd,MAAM;IAAEK;EAAO,CAAC,GAAG,IAAAC,4BAAiB,EAAC,CAAC;EACtC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEnD,MAAMC,QAAQ,GAAIC,KAAqC,IAAK;IAC1DH,aAAa,CAACG,KAAK,CAACC,aAAa,CAACC,UAAU,GAAG,CAAC,CAAC;EACnD,CAAC;EAED,OACEvC,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAC,gCAAgC;IAACL,QAAQ,EAAEA;EAAS,GACjEpC,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IAAOC,SAAS,EAAC,8BAA8B;IAAC,eAAY;EAAO,GACjEzC,MAAA,CAAAW,OAAA,CAAA6B,aAAA,CAACpC,YAAA,CAAAsC,WAAW;IACVC,OAAO,EAAEf,YAAa;IACtBE,OAAO,EAAE,CAAC,CAACA,OAAQ;IACnBG,UAAU,EAAEA;EAAW,CACxB,CAAC,EACD,CAACH,OAAO,IACP9B,MAAA,CAAAW,OAAA,CAAA6B,aAAA,gBACExC,MAAA,CAAAW,OAAA,CAAA6B,aAAA,CAAAxC,MAAA,CAAAW,OAAA,CAAAiC,QAAA,QACGjB,OAAO,CAACkB,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzBlB,SAAS,CAACiB,MAAM,EAAEC,KAAK,EAAEd,UAAU,CACrC,CACA,CACG,CAEJ,CAAC,EACPH,OAAO,IACN9B,MAAA,CAAAW,OAAA,CAAA6B,aAAA;IACEC,SAAS,EAAE,IAAAO,mBAAU,EACnB,sIAAsI,EACtI;MACE,kBAAkB,EAAEjB,MAAM;MAC1B,oBAAoB,EAAE,CAACA;IACzB,CACF;EAAE,GAEF/B,MAAA,CAAAW,OAAA,CAAA6B,aAAA,CAACrC,MAAA,CAAA8C,UAAU,MAAE,CACV,CAEJ,CAAC;AAEV","ignoreList":[]}
1
+ {"version":3,"file":"Table.js","names":["_classnames","_interopRequireDefault","require","_react","_interopRequireWildcard","_providers","_Error","_TableHeader","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Table","_ref","records","headerConfig","renderRow","isError","isDark","useLayoutProvider","isScrolled","setIsScrolled","useState","onScroll","event","currentTarget","scrollLeft","isEmptyData","length","createElement","className","TableHeader","columns","Fragment","map","record","index","classnames","ChartError","errorType","undefined"],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { SyntheticEvent } from 'react';\nimport React, { useState } from 'react';\n\nimport { useLayoutProvider } from '../../providers';\nimport { ChartError } from '../Error';\nimport { TableHeader } from './TableHeader';\nimport type { TableProps } from './types';\n\nfunction Table<T>({\n records,\n headerConfig,\n renderRow,\n isError,\n}: TableProps<T>) {\n const { isDark } = useLayoutProvider();\n const [isScrolled, setIsScrolled] = useState(false);\n\n const onScroll = (event: SyntheticEvent<HTMLDivElement>) => {\n setIsScrolled(event.currentTarget.scrollLeft > 0);\n };\n\n const isEmptyData = records.length === 0;\n\n return (\n <div className=\"lw-relative lw-overflow-x-auto\" onScroll={onScroll}>\n <table className=\"lw-w-full lw-border-collapse\" data-testid=\"table\">\n <TableHeader\n columns={headerConfig}\n isError={!!isError}\n isScrolled={isScrolled}\n />\n {!isError && (\n <tbody>\n <>\n {records.map((record, index) =>\n renderRow(record, index, isScrolled)\n )}\n </>\n </tbody>\n )}\n </table>\n {(isError || isEmptyData) && (\n <div\n className={classnames(\n 'lw-sticky lw-left-0 lw-top-0 lw-flex lw-h-[250px] lw-w-full lw-items-center lw-justify-center lw-border-t lw-border-t-border-primary',\n {\n 'lw-bg-bg-primary': isDark,\n 'lw-bg-bg-secondary': !isDark,\n }\n )}\n >\n <ChartError\n errorType={isEmptyData ? 'noMatchingResults' : undefined}\n />\n </div>\n )}\n </div>\n );\n}\n\nexport { Table };\n"],"mappings":"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","ignoreList":[]}
@@ -1,4 +1,5 @@
1
1
  {
2
2
  "data_unavailable": "Data unavailable",
3
+ "no_matching_results": "No matching results",
3
4
  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries"
4
5
  }
@@ -0,0 +1,26 @@
1
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
+ import ReactEChartsCore from 'echarts-for-react/lib/core';
3
+ import React, { forwardRef, useEffect, useState } from 'react';
4
+ export const BaseChart = forwardRef((_ref, ref) => {
5
+ let {
6
+ isDark,
7
+ chartHeight,
8
+ ...props
9
+ } = _ref;
10
+ const [ready, setReady] = useState(false);
11
+ useEffect(() => {
12
+ void document.fonts.ready.then(() => setReady(true));
13
+ }, []);
14
+ return React.createElement(ReactEChartsCore, _extends({}, props, {
15
+ ref: ref,
16
+ "data-testid": "charts-container",
17
+ showLoading: !ready,
18
+ style: {
19
+ height: `${chartHeight}px`,
20
+ width: '100%'
21
+ },
22
+ theme: isDark ? 'dark_theme' : 'light_theme'
23
+ }));
24
+ });
25
+ BaseChart.displayName = 'BaseChart';
26
+ //# sourceMappingURL=BaseChart.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseChart.js","names":["ReactEChartsCore","React","forwardRef","useEffect","useState","BaseChart","_ref","ref","isDark","chartHeight","props","ready","setReady","document","fonts","then","createElement","_extends","showLoading","style","height","width","theme","displayName"],"sources":["../../../src/chart/BaseChart.tsx"],"sourcesContent":["import ReactEChartsCore from 'echarts-for-react/lib/core';\nimport type { EChartsReactProps } from 'echarts-for-react/lib/types';\nimport React, { forwardRef, useEffect, useState } from 'react';\n\nimport type { BaseChartRef } from './types';\n\ntype BaseChartProps = EChartsReactProps & {\n isDark: boolean;\n chartHeight: number;\n};\n\nexport const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(\n ({ isDark, chartHeight, ...props }, ref) => {\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n void document.fonts.ready.then(() => setReady(true));\n }, []);\n\n return (\n <ReactEChartsCore\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n ref={ref}\n data-testid=\"charts-container\"\n showLoading={!ready}\n style={{\n height: `${chartHeight}px`,\n width: '100%',\n }}\n theme={isDark ? 'dark_theme' : 'light_theme'}\n />\n );\n }\n);\n\nBaseChart.displayName = 'BaseChart';\n"],"mappings":";AAAA,OAAOA,gBAAgB,MAAM,4BAA4B;AAEzD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAS9D,OAAO,MAAMC,SAAS,GAAGH,UAAU,CACjC,CAAAI,IAAA,EAAoCC,GAAG,KAAK;EAAA,IAA3C;IAAEC,MAAM;IAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAChC,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAGR,QAAQ,CAAC,KAAK,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACd,KAAKU,QAAQ,CAACC,KAAK,CAACH,KAAK,CAACI,IAAI,CAAC,MAAMH,QAAQ,CAAC,IAAI,CAAC,CAAC;EACtD,CAAC,EAAE,EAAE,CAAC;EAEN,OACEX,KAAA,CAAAe,aAAA,CAAChB,gBAAgB,EAAAiB,QAAA,KAEXP,KAAK;IACTH,GAAG,EAAEA,GAAI;IACT,eAAY,kBAAkB;IAC9BW,WAAW,EAAE,CAACP,KAAM;IACpBQ,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGX,WAAW,IAAI;MAC1BY,KAAK,EAAE;IACT,CAAE;IACFC,KAAK,EAAEd,MAAM,GAAG,YAAY,GAAG;EAAc,EAC9C,CAAC;AAEN,CACF,CAAC;AAEDH,SAAS,CAACkB,WAAW,GAAG,WAAW","ignoreList":[]}
@@ -1,5 +1,7 @@
1
+ export * from './BaseChart';
1
2
  export * from './getGridLines';
2
3
  export * from './getTheme';
3
4
  export * from './getZoomControls';
4
5
  export * from './sharedOptions';
6
+ export * from './types';
5
7
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/chart/index.ts"],"sourcesContent":["export * from './getGridLines';\nexport * from './getTheme';\nexport * from './getZoomControls';\nexport * from './sharedOptions';\n"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,iBAAiB","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/chart/index.ts"],"sourcesContent":["export * from './BaseChart';\nexport * from './getGridLines';\nexport * from './getTheme';\nexport * from './getZoomControls';\nexport * from './sharedOptions';\nexport * from './types';\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,iBAAiB;AAC/B,cAAc,SAAS","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","names":[],"sources":["../../../src/chart/types.ts"],"sourcesContent":["import type ReactEChartsCore from 'echarts-for-react/lib/core';\n\nexport type BaseChartRef = ReactEChartsCore;\n"],"mappings":"","ignoreList":[]}
@@ -3,7 +3,10 @@ import classnames from 'classnames';
3
3
  import React from 'react';
4
4
  import { ChartErrorIcon, ErrorIcon } from '../../images';
5
5
  import { useLayoutProvider } from '../../providers';
6
- const ChartError = () => {
6
+ const ChartError = _ref => {
7
+ let {
8
+ errorType = 'dataUnavailable'
9
+ } = _ref;
7
10
  const {
8
11
  lang
9
12
  } = useLocale();
@@ -18,7 +21,7 @@ const ChartError = () => {
18
21
  "data-testid": "chart-error"
19
22
  }, React.createElement(ChartErrorIcon, null), React.createElement("span", {
20
23
  className: "lw-mt-3 lw-font-sans lw-uppercase"
21
- }, lang('data_unavailable')));
24
+ }, errorType === 'dataUnavailable' ? lang('data_unavailable') : lang('no_matching_results')));
22
25
  };
23
26
  const Error = () => {
24
27
  const {
@@ -1 +1 @@
1
- {"version":3,"file":"Error.js","names":["useLocale","classnames","React","ChartErrorIcon","ErrorIcon","useLayoutProvider","ChartError","lang","isDark","createElement","className","Error","WidgetError"],"sources":["../../../../src/components/Error/Error.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport { ChartErrorIcon, ErrorIcon } from '../../images';\nimport { useLayoutProvider } from '../../providers';\n\nconst ChartError = () => {\n const { lang } = useLocale();\n const { isDark } = useLayoutProvider();\n\n return (\n <div\n className={classnames(\n 'lw-flex lw-flex-1 lw-flex-col lw-items-center lw-justify-center lw-stroke-2',\n {\n 'lw-text-text-primary': isDark,\n 'lw-text-text-secondary': !isDark,\n }\n )}\n data-testid=\"chart-error\"\n >\n <ChartErrorIcon />\n <span className=\"lw-mt-3 lw-font-sans lw-uppercase\">\n {lang('data_unavailable')}\n </span>\n </div>\n );\n};\n\nconst Error = () => {\n const { lang } = useLocale();\n const { isDark } = useLayoutProvider();\n\n return (\n <div\n className={classnames(\n 'lw-flex lw-items-center lw-justify-center lw-gap-1',\n {\n 'lw-text-text-primary': isDark,\n 'lw-text-text-secondary': !isDark,\n }\n )}\n data-testid=\"error\"\n >\n <ErrorIcon />\n <span className=\"lw-font-sans lw-text-xs lw-uppercase\">\n {lang('data_unavailable')}\n </span>\n </div>\n );\n};\n\nconst WidgetError = () => (\n <div\n className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\"\n data-testid=\"widget-error\"\n >\n <ChartError />\n </div>\n);\n\nexport { ChartError, Error, WidgetError };\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,EAAEC,SAAS,QAAQ,cAAc;AACxD,SAASC,iBAAiB,QAAQ,iBAAiB;AAEnD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAM;IAAEC;EAAK,CAAC,GAAGP,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEQ;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtC,OACEH,KAAA,CAAAO,aAAA;IACEC,SAAS,EAAET,UAAU,CACnB,6EAA6E,EAC7E;MACE,sBAAsB,EAAEO,MAAM;MAC9B,wBAAwB,EAAE,CAACA;IAC7B,CACF,CAAE;IACF,eAAY;EAAa,GAEzBN,KAAA,CAAAO,aAAA,CAACN,cAAc,MAAE,CAAC,EAClBD,KAAA,CAAAO,aAAA;IAAMC,SAAS,EAAC;EAAmC,GAChDH,IAAI,CAAC,kBAAkB,CACpB,CACH,CAAC;AAEV,CAAC;AAED,MAAMI,KAAK,GAAGA,CAAA,KAAM;EAClB,MAAM;IAAEJ;EAAK,CAAC,GAAGP,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEQ;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtC,OACEH,KAAA,CAAAO,aAAA;IACEC,SAAS,EAAET,UAAU,CACnB,oDAAoD,EACpD;MACE,sBAAsB,EAAEO,MAAM;MAC9B,wBAAwB,EAAE,CAACA;IAC7B,CACF,CAAE;IACF,eAAY;EAAO,GAEnBN,KAAA,CAAAO,aAAA,CAACL,SAAS,MAAE,CAAC,EACbF,KAAA,CAAAO,aAAA;IAAMC,SAAS,EAAC;EAAsC,GACnDH,IAAI,CAAC,kBAAkB,CACpB,CACH,CAAC;AAEV,CAAC;AAED,MAAMK,WAAW,GAAGA,CAAA,KAClBV,KAAA,CAAAO,aAAA;EACEC,SAAS,EAAC,mGAAmG;EAC7G,eAAY;AAAc,GAE1BR,KAAA,CAAAO,aAAA,CAACH,UAAU,MAAE,CACV,CACN;AAED,SAASA,UAAU,EAAEK,KAAK,EAAEC,WAAW","ignoreList":[]}
1
+ {"version":3,"file":"Error.js","names":["useLocale","classnames","React","ChartErrorIcon","ErrorIcon","useLayoutProvider","ChartError","_ref","errorType","lang","isDark","createElement","className","Error","WidgetError"],"sources":["../../../../src/components/Error/Error.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport classnames from 'classnames';\nimport React from 'react';\n\nimport { ChartErrorIcon, ErrorIcon } from '../../images';\nimport { useLayoutProvider } from '../../providers';\n\nconst ChartError = ({\n errorType = 'dataUnavailable',\n}: {\n errorType?: 'dataUnavailable' | 'noMatchingResults';\n}) => {\n const { lang } = useLocale();\n const { isDark } = useLayoutProvider();\n\n return (\n <div\n className={classnames(\n 'lw-flex lw-flex-1 lw-flex-col lw-items-center lw-justify-center lw-stroke-2',\n {\n 'lw-text-text-primary': isDark,\n 'lw-text-text-secondary': !isDark,\n }\n )}\n data-testid=\"chart-error\"\n >\n <ChartErrorIcon />\n <span className=\"lw-mt-3 lw-font-sans lw-uppercase\">\n {errorType === 'dataUnavailable'\n ? lang('data_unavailable')\n : lang('no_matching_results')}\n </span>\n </div>\n );\n};\n\nconst Error = () => {\n const { lang } = useLocale();\n const { isDark } = useLayoutProvider();\n\n return (\n <div\n className={classnames(\n 'lw-flex lw-items-center lw-justify-center lw-gap-1',\n {\n 'lw-text-text-primary': isDark,\n 'lw-text-text-secondary': !isDark,\n }\n )}\n data-testid=\"error\"\n >\n <ErrorIcon />\n <span className=\"lw-font-sans lw-text-xs lw-uppercase\">\n {lang('data_unavailable')}\n </span>\n </div>\n );\n};\n\nconst WidgetError = () => (\n <div\n className=\"lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary\"\n data-testid=\"widget-error\"\n >\n <ChartError />\n </div>\n);\n\nexport { ChartError, Error, WidgetError };\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,EAAEC,SAAS,QAAQ,cAAc;AACxD,SAASC,iBAAiB,QAAQ,iBAAiB;AAEnD,MAAMC,UAAU,GAAGC,IAAA,IAIb;EAAA,IAJc;IAClBC,SAAS,GAAG;EAGd,CAAC,GAAAD,IAAA;EACC,MAAM;IAAEE;EAAK,CAAC,GAAGT,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEU;EAAO,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAEtC,OACEH,KAAA,CAAAS,aAAA;IACEC,SAAS,EAAEX,UAAU,CACnB,6EAA6E,EAC7E;MACE,sBAAsB,EAAES,MAAM;MAC9B,wBAAwB,EAAE,CAACA;IAC7B,CACF,CAAE;IACF,eAAY;EAAa,GAEzBR,KAAA,CAAAS,aAAA,CAACR,cAAc,MAAE,CAAC,EAClBD,KAAA,CAAAS,aAAA;IAAMC,SAAS,EAAC;EAAmC,GAChDJ,SAAS,KAAK,iBAAiB,GAC5BC,IAAI,CAAC,kBAAkB,CAAC,GACxBA,IAAI,CAAC,qBAAqB,CAC1B,CACH,CAAC;AAEV,CAAC;AAED,MAAMI,KAAK,GAAGA,CAAA,KAAM;EAClB,MAAM;IAAEJ;EAAK,CAAC,GAAGT,SAAS,CAAC,CAAC;EAC5B,MAAM;IAAEU;EAAO,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAEtC,OACEH,KAAA,CAAAS,aAAA;IACEC,SAAS,EAAEX,UAAU,CACnB,oDAAoD,EACpD;MACE,sBAAsB,EAAES,MAAM;MAC9B,wBAAwB,EAAE,CAACA;IAC7B,CACF,CAAE;IACF,eAAY;EAAO,GAEnBR,KAAA,CAAAS,aAAA,CAACP,SAAS,MAAE,CAAC,EACbF,KAAA,CAAAS,aAAA;IAAMC,SAAS,EAAC;EAAsC,GACnDH,IAAI,CAAC,kBAAkB,CACpB,CACH,CAAC;AAEV,CAAC;AAED,MAAMK,WAAW,GAAGA,CAAA,KAClBZ,KAAA,CAAAS,aAAA;EACEC,SAAS,EAAC,mGAAmG;EAC7G,eAAY;AAAc,GAE1BV,KAAA,CAAAS,aAAA,CAACL,UAAU,MAAE,CACV,CACN;AAED,SAASA,UAAU,EAAEO,KAAK,EAAEC,WAAW","ignoreList":[]}
@@ -17,6 +17,7 @@ function Table(_ref) {
17
17
  const onScroll = event => {
18
18
  setIsScrolled(event.currentTarget.scrollLeft > 0);
19
19
  };
20
+ const isEmptyData = records.length === 0;
20
21
  return React.createElement("div", {
21
22
  className: "lw-relative lw-overflow-x-auto",
22
23
  onScroll: onScroll
@@ -27,12 +28,14 @@ function Table(_ref) {
27
28
  columns: headerConfig,
28
29
  isError: !!isError,
29
30
  isScrolled: isScrolled
30
- }), !isError && React.createElement("tbody", null, React.createElement(React.Fragment, null, records.map((record, index) => renderRow(record, index, isScrolled))))), isError && React.createElement("div", {
31
+ }), !isError && React.createElement("tbody", null, React.createElement(React.Fragment, null, records.map((record, index) => renderRow(record, index, isScrolled))))), (isError || isEmptyData) && React.createElement("div", {
31
32
  className: classnames('lw-sticky lw-left-0 lw-top-0 lw-flex lw-h-[250px] lw-w-full lw-items-center lw-justify-center lw-border-t lw-border-t-border-primary', {
32
33
  'lw-bg-bg-primary': isDark,
33
34
  'lw-bg-bg-secondary': !isDark
34
35
  })
35
- }, React.createElement(ChartError, null)));
36
+ }, React.createElement(ChartError, {
37
+ errorType: isEmptyData ? 'noMatchingResults' : undefined
38
+ })));
36
39
  }
37
40
  export { Table };
38
41
  //# sourceMappingURL=Table.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","names":["classnames","React","useState","useLayoutProvider","ChartError","TableHeader","Table","_ref","records","headerConfig","renderRow","isError","isDark","isScrolled","setIsScrolled","onScroll","event","currentTarget","scrollLeft","createElement","className","columns","Fragment","map","record","index"],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { SyntheticEvent } from 'react';\nimport React, { useState } from 'react';\n\nimport { useLayoutProvider } from '../../providers';\nimport { ChartError } from '../Error';\nimport { TableHeader } from './TableHeader';\nimport type { TableProps } from './types';\n\nfunction Table<T>({\n records,\n headerConfig,\n renderRow,\n isError,\n}: TableProps<T>) {\n const { isDark } = useLayoutProvider();\n const [isScrolled, setIsScrolled] = useState(false);\n\n const onScroll = (event: SyntheticEvent<HTMLDivElement>) => {\n setIsScrolled(event.currentTarget.scrollLeft > 0);\n };\n\n return (\n <div className=\"lw-relative lw-overflow-x-auto\" onScroll={onScroll}>\n <table className=\"lw-w-full lw-border-collapse\" data-testid=\"table\">\n <TableHeader\n columns={headerConfig}\n isError={!!isError}\n isScrolled={isScrolled}\n />\n {!isError && (\n <tbody>\n <>\n {records.map((record, index) =>\n renderRow(record, index, isScrolled)\n )}\n </>\n </tbody>\n )}\n </table>\n {isError && (\n <div\n className={classnames(\n 'lw-sticky lw-left-0 lw-top-0 lw-flex lw-h-[250px] lw-w-full lw-items-center lw-justify-center lw-border-t lw-border-t-border-primary',\n {\n 'lw-bg-bg-primary': isDark,\n 'lw-bg-bg-secondary': !isDark,\n }\n )}\n >\n <ChartError />\n </div>\n )}\n </div>\n );\n}\n\nexport { Table };\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AAEnC,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,iBAAiB,QAAQ,iBAAiB;AACnD,SAASC,UAAU,QAAQ,UAAU;AACrC,SAASC,WAAW,QAAQ,eAAe;AAG3C,SAASC,KAAKA,CAAAC,IAAA,EAKI;EAAA,IALA;IAChBC,OAAO;IACPC,YAAY;IACZC,SAAS;IACTC;EACa,CAAC,GAAAJ,IAAA;EACd,MAAM;IAAEK;EAAO,CAAC,GAAGT,iBAAiB,CAAC,CAAC;EACtC,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EAEnD,MAAMa,QAAQ,GAAIC,KAAqC,IAAK;IAC1DF,aAAa,CAACE,KAAK,CAACC,aAAa,CAACC,UAAU,GAAG,CAAC,CAAC;EACnD,CAAC;EAED,OACEjB,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC,gCAAgC;IAACL,QAAQ,EAAEA;EAAS,GACjEd,KAAA,CAAAkB,aAAA;IAAOC,SAAS,EAAC,8BAA8B;IAAC,eAAY;EAAO,GACjEnB,KAAA,CAAAkB,aAAA,CAACd,WAAW;IACVgB,OAAO,EAAEZ,YAAa;IACtBE,OAAO,EAAE,CAAC,CAACA,OAAQ;IACnBE,UAAU,EAAEA;EAAW,CACxB,CAAC,EACD,CAACF,OAAO,IACPV,KAAA,CAAAkB,aAAA,gBACElB,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAqB,QAAA,QACGd,OAAO,CAACe,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzBf,SAAS,CAACc,MAAM,EAAEC,KAAK,EAAEZ,UAAU,CACrC,CACA,CACG,CAEJ,CAAC,EACPF,OAAO,IACNV,KAAA,CAAAkB,aAAA;IACEC,SAAS,EAAEpB,UAAU,CACnB,sIAAsI,EACtI;MACE,kBAAkB,EAAEY,MAAM;MAC1B,oBAAoB,EAAE,CAACA;IACzB,CACF;EAAE,GAEFX,KAAA,CAAAkB,aAAA,CAACf,UAAU,MAAE,CACV,CAEJ,CAAC;AAEV;AAEA,SAASE,KAAK","ignoreList":[]}
1
+ {"version":3,"file":"Table.js","names":["classnames","React","useState","useLayoutProvider","ChartError","TableHeader","Table","_ref","records","headerConfig","renderRow","isError","isDark","isScrolled","setIsScrolled","onScroll","event","currentTarget","scrollLeft","isEmptyData","length","createElement","className","columns","Fragment","map","record","index","errorType","undefined"],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { SyntheticEvent } from 'react';\nimport React, { useState } from 'react';\n\nimport { useLayoutProvider } from '../../providers';\nimport { ChartError } from '../Error';\nimport { TableHeader } from './TableHeader';\nimport type { TableProps } from './types';\n\nfunction Table<T>({\n records,\n headerConfig,\n renderRow,\n isError,\n}: TableProps<T>) {\n const { isDark } = useLayoutProvider();\n const [isScrolled, setIsScrolled] = useState(false);\n\n const onScroll = (event: SyntheticEvent<HTMLDivElement>) => {\n setIsScrolled(event.currentTarget.scrollLeft > 0);\n };\n\n const isEmptyData = records.length === 0;\n\n return (\n <div className=\"lw-relative lw-overflow-x-auto\" onScroll={onScroll}>\n <table className=\"lw-w-full lw-border-collapse\" data-testid=\"table\">\n <TableHeader\n columns={headerConfig}\n isError={!!isError}\n isScrolled={isScrolled}\n />\n {!isError && (\n <tbody>\n <>\n {records.map((record, index) =>\n renderRow(record, index, isScrolled)\n )}\n </>\n </tbody>\n )}\n </table>\n {(isError || isEmptyData) && (\n <div\n className={classnames(\n 'lw-sticky lw-left-0 lw-top-0 lw-flex lw-h-[250px] lw-w-full lw-items-center lw-justify-center lw-border-t lw-border-t-border-primary',\n {\n 'lw-bg-bg-primary': isDark,\n 'lw-bg-bg-secondary': !isDark,\n }\n )}\n >\n <ChartError\n errorType={isEmptyData ? 'noMatchingResults' : undefined}\n />\n </div>\n )}\n </div>\n );\n}\n\nexport { Table };\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AAEnC,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,iBAAiB,QAAQ,iBAAiB;AACnD,SAASC,UAAU,QAAQ,UAAU;AACrC,SAASC,WAAW,QAAQ,eAAe;AAG3C,SAASC,KAAKA,CAAAC,IAAA,EAKI;EAAA,IALA;IAChBC,OAAO;IACPC,YAAY;IACZC,SAAS;IACTC;EACa,CAAC,GAAAJ,IAAA;EACd,MAAM;IAAEK;EAAO,CAAC,GAAGT,iBAAiB,CAAC,CAAC;EACtC,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EAEnD,MAAMa,QAAQ,GAAIC,KAAqC,IAAK;IAC1DF,aAAa,CAACE,KAAK,CAACC,aAAa,CAACC,UAAU,GAAG,CAAC,CAAC;EACnD,CAAC;EAED,MAAMC,WAAW,GAAGX,OAAO,CAACY,MAAM,KAAK,CAAC;EAExC,OACEnB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAC,gCAAgC;IAACP,QAAQ,EAAEA;EAAS,GACjEd,KAAA,CAAAoB,aAAA;IAAOC,SAAS,EAAC,8BAA8B;IAAC,eAAY;EAAO,GACjErB,KAAA,CAAAoB,aAAA,CAAChB,WAAW;IACVkB,OAAO,EAAEd,YAAa;IACtBE,OAAO,EAAE,CAAC,CAACA,OAAQ;IACnBE,UAAU,EAAEA;EAAW,CACxB,CAAC,EACD,CAACF,OAAO,IACPV,KAAA,CAAAoB,aAAA,gBACEpB,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAAuB,QAAA,QACGhB,OAAO,CAACiB,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzBjB,SAAS,CAACgB,MAAM,EAAEC,KAAK,EAAEd,UAAU,CACrC,CACA,CACG,CAEJ,CAAC,EACP,CAACF,OAAO,IAAIQ,WAAW,KACtBlB,KAAA,CAAAoB,aAAA;IACEC,SAAS,EAAEtB,UAAU,CACnB,sIAAsI,EACtI;MACE,kBAAkB,EAAEY,MAAM;MAC1B,oBAAoB,EAAE,CAACA;IACzB,CACF;EAAE,GAEFX,KAAA,CAAAoB,aAAA,CAACjB,UAAU;IACTwB,SAAS,EAAET,WAAW,GAAG,mBAAmB,GAAGU;EAAU,CAC1D,CACE,CAEJ,CAAC;AAEV;AAEA,SAASvB,KAAK","ignoreList":[]}
@@ -1,4 +1,5 @@
1
1
  {
2
2
  "data_unavailable": "Data unavailable",
3
+ "no_matching_results": "No matching results",
3
4
  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries"
4
5
  }
@@ -0,0 +1,7 @@
1
+ import ReactEChartsCore from 'echarts-for-react/lib/core';
2
+ import type { EChartsReactProps } from 'echarts-for-react/lib/types';
3
+ import React from 'react';
4
+ export declare const BaseChart: React.ForwardRefExoticComponent<EChartsReactProps & {
5
+ isDark: boolean;
6
+ chartHeight: number;
7
+ } & React.RefAttributes<ReactEChartsCore>>;
@@ -1,4 +1,6 @@
1
+ export * from './BaseChart';
1
2
  export * from './getGridLines';
2
3
  export * from './getTheme';
3
4
  export * from './getZoomControls';
4
5
  export * from './sharedOptions';
6
+ export * from './types';
@@ -0,0 +1,2 @@
1
+ import type ReactEChartsCore from 'echarts-for-react/lib/core';
2
+ export type BaseChartRef = ReactEChartsCore;
@@ -1,5 +1,7 @@
1
1
  import React from 'react';
2
- declare const ChartError: () => React.JSX.Element;
2
+ declare const ChartError: ({ errorType, }: {
3
+ errorType?: "dataUnavailable" | "noMatchingResults";
4
+ }) => React.JSX.Element;
3
5
  declare const Error: () => React.JSX.Element;
4
6
  declare const WidgetError: () => React.JSX.Element;
5
7
  export { ChartError, Error, WidgetError };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oanda/labs-widget-common",
3
- "version": "1.0.196",
3
+ "version": "1.0.198",
4
4
  "description": "Labs Widget Common",
5
5
  "main": "dist/main/index.js",
6
6
  "module": "dist/module/index.js",
@@ -21,5 +21,5 @@
21
21
  "tailwind-merge": "2.2.2",
22
22
  "usehooks-ts": "3.0.2"
23
23
  },
24
- "gitHead": "ce7aa8fffcd7421cab1451dd20e994dd2d813729"
24
+ "gitHead": "083781981c17b38576e6e46122dca29abd250b34"
25
25
  }
@@ -0,0 +1,37 @@
1
+ import ReactEChartsCore from 'echarts-for-react/lib/core';
2
+ import type { EChartsReactProps } from 'echarts-for-react/lib/types';
3
+ import React, { forwardRef, useEffect, useState } from 'react';
4
+
5
+ import type { BaseChartRef } from './types';
6
+
7
+ type BaseChartProps = EChartsReactProps & {
8
+ isDark: boolean;
9
+ chartHeight: number;
10
+ };
11
+
12
+ export const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(
13
+ ({ isDark, chartHeight, ...props }, ref) => {
14
+ const [ready, setReady] = useState(false);
15
+
16
+ useEffect(() => {
17
+ void document.fonts.ready.then(() => setReady(true));
18
+ }, []);
19
+
20
+ return (
21
+ <ReactEChartsCore
22
+ // eslint-disable-next-line react/jsx-props-no-spreading
23
+ {...props}
24
+ ref={ref}
25
+ data-testid="charts-container"
26
+ showLoading={!ready}
27
+ style={{
28
+ height: `${chartHeight}px`,
29
+ width: '100%',
30
+ }}
31
+ theme={isDark ? 'dark_theme' : 'light_theme'}
32
+ />
33
+ );
34
+ }
35
+ );
36
+
37
+ BaseChart.displayName = 'BaseChart';
@@ -1,4 +1,6 @@
1
+ export * from './BaseChart';
1
2
  export * from './getGridLines';
2
3
  export * from './getTheme';
3
4
  export * from './getZoomControls';
4
5
  export * from './sharedOptions';
6
+ export * from './types';
@@ -0,0 +1,3 @@
1
+ import type ReactEChartsCore from 'echarts-for-react/lib/core';
2
+
3
+ export type BaseChartRef = ReactEChartsCore;
@@ -5,7 +5,11 @@ import React from 'react';
5
5
  import { ChartErrorIcon, ErrorIcon } from '../../images';
6
6
  import { useLayoutProvider } from '../../providers';
7
7
 
8
- const ChartError = () => {
8
+ const ChartError = ({
9
+ errorType = 'dataUnavailable',
10
+ }: {
11
+ errorType?: 'dataUnavailable' | 'noMatchingResults';
12
+ }) => {
9
13
  const { lang } = useLocale();
10
14
  const { isDark } = useLayoutProvider();
11
15
 
@@ -22,7 +26,9 @@ const ChartError = () => {
22
26
  >
23
27
  <ChartErrorIcon />
24
28
  <span className="lw-mt-3 lw-font-sans lw-uppercase">
25
- {lang('data_unavailable')}
29
+ {errorType === 'dataUnavailable'
30
+ ? lang('data_unavailable')
31
+ : lang('no_matching_results')}
26
32
  </span>
27
33
  </div>
28
34
  );
@@ -20,6 +20,8 @@ function Table<T>({
20
20
  setIsScrolled(event.currentTarget.scrollLeft > 0);
21
21
  };
22
22
 
23
+ const isEmptyData = records.length === 0;
24
+
23
25
  return (
24
26
  <div className="lw-relative lw-overflow-x-auto" onScroll={onScroll}>
25
27
  <table className="lw-w-full lw-border-collapse" data-testid="table">
@@ -38,7 +40,7 @@ function Table<T>({
38
40
  </tbody>
39
41
  )}
40
42
  </table>
41
- {isError && (
43
+ {(isError || isEmptyData) && (
42
44
  <div
43
45
  className={classnames(
44
46
  'lw-sticky lw-left-0 lw-top-0 lw-flex lw-h-[250px] lw-w-full lw-items-center lw-justify-center lw-border-t lw-border-t-border-primary',
@@ -48,7 +50,9 @@ function Table<T>({
48
50
  }
49
51
  )}
50
52
  >
51
- <ChartError />
53
+ <ChartError
54
+ errorType={isEmptyData ? 'noMatchingResults' : undefined}
55
+ />
52
56
  </div>
53
57
  )}
54
58
  </div>
@@ -1,4 +1,5 @@
1
1
  {
2
2
  "data_unavailable": "Data unavailable",
3
+ "no_matching_results": "No matching results",
3
4
  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries"
4
5
  }