@appquality/unguess-design-system 3.1.46 → 3.1.47

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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # v3.1.47 (Mon Sep 04 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Sentiment chart [#266](https://github.com/AppQuality/unguess-design-system/pull/266) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon))
6
+ - Sentiment chart [#265](https://github.com/AppQuality/unguess-design-system/pull/265) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon))
7
+
8
+ #### Authors: 2
9
+
10
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
11
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
12
+
13
+ ---
14
+
1
15
  # v3.1.46 (Tue Aug 29 2023)
2
16
 
3
17
  #### 🐛 Bug Fix
package/build/index.d.ts CHANGED
@@ -20,6 +20,7 @@ export * from "./stories/charts/pie";
20
20
  export * from "./stories/charts/halfPie";
21
21
  export * from "./stories/charts/sunburst";
22
22
  export * from "./stories/charts/waffle";
23
+ export * from "./stories/charts/sentiment";
23
24
  export * from "./stories/close";
24
25
  export * from "./stories/drawers";
25
26
  export * as DropdownField from "./stories/dropdowns/field";
package/build/index.js CHANGED
@@ -23,6 +23,7 @@ var tooltip = require('@nivo/tooltip');
23
23
  var pie = require('@nivo/pie');
24
24
  var sunburst = require('@nivo/sunburst');
25
25
  var waffle = require('@nivo/waffle');
26
+ var line = require('@nivo/line');
26
27
  var reactModals = require('@zendeskgarden/react-modals');
27
28
  var reactDropdowns = require('@zendeskgarden/react-dropdowns');
28
29
  var reactForms = require('@zendeskgarden/react-forms');
@@ -321,8 +322,8 @@ const UgContainerCard = styled__default["default"](reactNotifications.Well) `
321
322
  `;
322
323
  const ContainerCard = (props) => jsxRuntime.jsx(UgContainerCard, Object.assign({}, props));
323
324
 
324
- var _a, _b, _c, _d, _e, _f, _g$8, _h;
325
- const components = Object.assign(Object.assign(Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$8 = reactTheming.DEFAULT_THEME.components) === null || _g$8 === void 0 ? void 0 : _g$8.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) }), cardCmponentStyle), { "text.primary": () => ({
325
+ var _a, _b, _c, _d, _e, _f, _g$d, _h;
326
+ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$d = reactTheming.DEFAULT_THEME.components) === null || _g$d === void 0 ? void 0 : _g$d.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) }), cardCmponentStyle), { "text.primary": () => ({
326
327
  color: getColor(colors.primaryHue, 600),
327
328
  }), "text.success": () => ({
328
329
  color: getColor(colors.successHue, 700),
@@ -557,6 +558,7 @@ const GlobalStyle = styled.createGlobalStyle `
557
558
 
558
559
  ::-webkit-scrollbar {
559
560
  width: 10px;
561
+ height: 10px;
560
562
  }
561
563
 
562
564
  ::-webkit-scrollbar-track {
@@ -817,9 +819,9 @@ Tag.Close = StyledClose;
817
819
  Tag.SecondaryText = StyledSpan;
818
820
 
819
821
  var _path$C;
820
- function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
822
+ function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
821
823
  var SvgUgSquare = function SvgUgSquare(props) {
822
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
824
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
823
825
  width: 24,
824
826
  height: 24,
825
827
  viewBox: "0 0 24 24",
@@ -832,9 +834,9 @@ var SvgUgSquare = function SvgUgSquare(props) {
832
834
  };
833
835
 
834
836
  var _path$B;
835
- function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
837
+ function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
836
838
  var SvgUgCircle = function SvgUgCircle(props) {
837
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
839
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
838
840
  width: 24,
839
841
  height: 24,
840
842
  viewBox: "0 0 24 24",
@@ -847,9 +849,9 @@ var SvgUgCircle = function SvgUgCircle(props) {
847
849
  };
848
850
 
849
851
  var _path$A;
850
- function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
852
+ function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
851
853
  var SvgUgTriangle = function SvgUgTriangle(props) {
852
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
854
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
853
855
  width: 24,
854
856
  height: 24,
855
857
  viewBox: "0 0 24 24",
@@ -862,9 +864,9 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
862
864
  };
863
865
 
864
866
  var _rect$4, _path$z, _path2$b, _path3$4;
865
- function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
867
+ function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
866
868
  var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
867
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
869
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
868
870
  width: 24,
869
871
  height: 24,
870
872
  viewBox: "0 0 24 24",
@@ -888,9 +890,9 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
888
890
  };
889
891
 
890
892
  var _rect$3, _path$y, _path2$a;
891
- function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
893
+ function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
892
894
  var SvgCampaignLocked = function SvgCampaignLocked(props) {
893
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
895
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
894
896
  width: 24,
895
897
  height: 24,
896
898
  viewBox: "0 0 24 24",
@@ -915,9 +917,9 @@ var SvgCampaignLocked = function SvgCampaignLocked(props) {
915
917
  };
916
918
 
917
919
  var _rect$2, _path$x, _path2$9;
918
- function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
920
+ function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
919
921
  var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
920
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
922
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
921
923
  width: 24,
922
924
  height: 24,
923
925
  viewBox: "0 0 24 24",
@@ -944,9 +946,9 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
944
946
  };
945
947
 
946
948
  var _rect$1, _path$w, _path2$8, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
947
- function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
949
+ function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
948
950
  var SvgCampaignProgress = function SvgCampaignProgress(props) {
949
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
951
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
950
952
  width: 24,
951
953
  height: 24,
952
954
  viewBox: "0 0 24 24",
@@ -990,16 +992,16 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
990
992
  })));
991
993
  };
992
994
 
993
- var _g$7, _path$v, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
994
- function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
995
+ var _g$c, _path$v, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
996
+ function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
995
997
  var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
996
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
998
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
997
999
  width: 24,
998
1000
  height: 24,
999
1001
  viewBox: "0 0 24 24",
1000
1002
  fill: "none",
1001
1003
  xmlns: "http://www.w3.org/2000/svg"
1002
- }, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
1004
+ }, props), _g$c || (_g$c = /*#__PURE__*/React__namespace.createElement("g", {
1003
1005
  opacity: 0.3
1004
1006
  }, /*#__PURE__*/React__namespace.createElement("path", {
1005
1007
  opacity: 0.3,
@@ -1062,16 +1064,16 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
1062
1064
  })));
1063
1065
  };
1064
1066
 
1065
- var _g$6, _path$u;
1066
- function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
1067
+ var _g$b, _path$u;
1068
+ function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
1067
1069
  var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
1068
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
1070
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
1069
1071
  width: 24,
1070
1072
  height: 24,
1071
1073
  viewBox: "0 0 24 24",
1072
1074
  fill: "none",
1073
1075
  xmlns: "http://www.w3.org/2000/svg"
1074
- }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
1076
+ }, props), _g$b || (_g$b = /*#__PURE__*/React__namespace.createElement("g", {
1075
1077
  opacity: 0.3
1076
1078
  }, /*#__PURE__*/React__namespace.createElement("path", {
1077
1079
  opacity: 0.3,
@@ -1632,7 +1634,7 @@ const Tooltip$1 = styled__default["default"].div `
1632
1634
  box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
1633
1635
  max-width: 216px;
1634
1636
  `;
1635
- const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 };
1637
+ const DEFAULT_CHART_MARGINS$1 = { top: 0, right: 0, bottom: 30, left: 30 };
1636
1638
  const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBottomLabel, colors, tooltip, legend, }) => {
1637
1639
  const theme = React.useContext(styled.ThemeContext);
1638
1640
  const keys = [...new Set(data.map(({ keys }) => Object.keys(keys)).flat())];
@@ -1668,7 +1670,7 @@ const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBot
1668
1670
  },
1669
1671
  } }), colors: actualColors, layout: "horizontal", tooltip: tooltip
1670
1672
  ? (node) => jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip(node) })
1671
- : ({ id, value, indexValue }) => (jsxRuntime.jsx(Tooltip$1, { children: jsxRuntime.jsxs(MD, { children: [indexValue, " - ", id, ":", " ", jsxRuntime.jsx(MD, Object.assign({ tag: "span", isBold: true }, { children: value }))] }) })), padding: padding || 0.3, margin: Object.assign(Object.assign({}, DEFAULT_CHART_MARGINS), margin), enableGridY: false, enableLabel: false, enableGridX: true, gridXValues: 3, valueScale: {
1673
+ : ({ id, value, indexValue }) => (jsxRuntime.jsx(Tooltip$1, { children: jsxRuntime.jsxs(MD, { children: [indexValue, " - ", id, ":", " ", jsxRuntime.jsx(MD, Object.assign({ tag: "span", isBold: true }, { children: value }))] }) })), padding: padding || 0.3, margin: Object.assign(Object.assign({}, DEFAULT_CHART_MARGINS$1), margin), enableGridY: false, enableLabel: false, enableGridX: true, gridXValues: 3, valueScale: {
1672
1674
  type: "linear",
1673
1675
  nice: true,
1674
1676
  } }, (axisBottomLabel && {
@@ -1677,7 +1679,7 @@ const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBot
1677
1679
  tickPadding: 10,
1678
1680
  tickValues: 3,
1679
1681
  legend: axisBottomLabel,
1680
- legendOffset: ((margin === null || margin === void 0 ? void 0 : margin.bottom) || DEFAULT_CHART_MARGINS.bottom) - 10,
1682
+ legendOffset: ((margin === null || margin === void 0 ? void 0 : margin.bottom) || DEFAULT_CHART_MARGINS$1.bottom) - 10,
1681
1683
  legendPosition: "middle",
1682
1684
  },
1683
1685
  }), (axisLeftLabel && {
@@ -1685,7 +1687,7 @@ const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBot
1685
1687
  tickSize: 0,
1686
1688
  tickPadding: 20,
1687
1689
  legend: axisLeftLabel,
1688
- legendOffset: (((margin === null || margin === void 0 ? void 0 : margin.left) || DEFAULT_CHART_MARGINS.left) - 10) * -1,
1690
+ legendOffset: (((margin === null || margin === void 0 ? void 0 : margin.left) || DEFAULT_CHART_MARGINS$1.left) - 10) * -1,
1689
1691
  legendPosition: "middle",
1690
1692
  },
1691
1693
  }), { layers: ["bars", "grid", "axes"] })) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: actualColors, data: keys }, (typeof legend === "object" && legend)))) : undefined }))] }));
@@ -1939,6 +1941,353 @@ const WaffleChart = ({ height, width, data, total, tooltip, }) => {
1939
1941
  } }) })));
1940
1942
  };
1941
1943
 
1944
+ var _g$a, _defs$7;
1945
+ function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
1946
+ var SvgSentiment1 = function SvgSentiment1(props) {
1947
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
1948
+ width: 27,
1949
+ height: 26,
1950
+ viewBox: "0 0 27 26",
1951
+ fill: "none",
1952
+ xmlns: "http://www.w3.org/2000/svg"
1953
+ }, props), _g$a || (_g$a = /*#__PURE__*/React__namespace.createElement("g", {
1954
+ clipPath: "url(#clip0_21_19131)"
1955
+ }, /*#__PURE__*/React__namespace.createElement("path", {
1956
+ d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
1957
+ fill: "#E9979B"
1958
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1959
+ d: "M18.7975 21.5782C18.7643 21.4489 17.9361 18.4155 13.2768 18.4155C8.61687 18.4155 7.78931 21.4489 7.75612 21.5782C7.73674 21.6544 7.74333 21.7347 7.77489 21.807C7.80644 21.8792 7.86124 21.9393 7.93093 21.9783C8.001 22.0168 8.08189 22.0322 8.1616 22.0222C8.24131 22.0121 8.3156 21.9773 8.37347 21.9227C8.38748 21.9089 9.81468 20.5822 13.2768 20.5822C16.739 20.5822 18.1669 21.9089 18.1802 21.9219C18.2373 21.9772 18.3112 22.0128 18.3907 22.0233C18.4703 22.0339 18.5512 22.0188 18.6213 21.9804C18.6916 21.9415 18.7469 21.8811 18.7787 21.8084C18.8106 21.7358 18.8172 21.6549 18.7975 21.5782ZM11.5856 12.4883C9.18479 10.1374 5.32657 10.11 5.16357 10.11C4.97366 10.1182 4.7943 10.1978 4.66285 10.3323C4.5314 10.4668 4.45798 10.6457 4.45789 10.8319C4.45779 11.018 4.53102 11.197 4.66234 11.3316C4.79365 11.4662 4.97293 11.546 5.16283 11.5544C5.18422 11.5544 6.58265 11.5703 8.10057 12.0867C7.66319 12.5489 7.37628 13.2668 7.37628 14.0822C7.37628 15.479 8.20162 16.61 9.2202 16.61C10.2388 16.61 11.0641 15.479 11.0641 14.0822C11.0641 13.9565 11.0501 13.8367 11.0368 13.716C11.0464 13.716 11.0553 13.7211 11.0641 13.7211C11.2101 13.7214 11.3529 13.6792 11.4744 13.5999C11.5959 13.5206 11.6906 13.4078 11.7465 13.2757C11.8024 13.1436 11.8169 12.9982 11.7883 12.858C11.7596 12.7178 11.6891 12.5891 11.5856 12.4883ZM21.3901 10.11C21.2271 10.11 17.3696 10.1374 14.9681 12.4883C14.8646 12.5891 14.794 12.7178 14.7654 12.858C14.7367 12.9982 14.7513 13.1436 14.8072 13.2757C14.863 13.4078 14.9577 13.5206 15.0792 13.5999C15.2007 13.6792 15.3435 13.7214 15.4895 13.7211C15.4991 13.7211 15.5072 13.716 15.5161 13.716C15.5043 13.8367 15.4895 13.9565 15.4895 14.0822C15.4895 15.479 16.3149 16.61 17.3335 16.61C18.352 16.61 19.1774 15.479 19.1774 14.0822C19.1774 13.2668 18.8905 12.5489 18.4531 12.0867C19.4008 11.77 20.3908 11.5907 21.3916 11.5544C21.4884 11.5543 21.5843 11.5356 21.6738 11.4992C21.7632 11.4628 21.8445 11.4095 21.9129 11.3424C21.9813 11.2753 22.0356 11.1956 22.0725 11.1079C22.1095 11.0203 22.1285 10.9263 22.1284 10.8315C22.1283 10.7366 22.1091 10.6427 22.072 10.5552C22.0348 10.4676 21.9804 10.388 21.9118 10.321C21.8433 10.254 21.7619 10.2009 21.6724 10.1647C21.5829 10.1285 21.4869 10.1099 21.3901 10.11Z",
1960
+ fill: "#2F3941"
1961
+ }))), _defs$7 || (_defs$7 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
1962
+ id: "clip0_21_19131"
1963
+ }, /*#__PURE__*/React__namespace.createElement("rect", {
1964
+ width: 26.5525,
1965
+ height: 26,
1966
+ fill: "white"
1967
+ })))));
1968
+ };
1969
+
1970
+ var _g$9, _defs$6;
1971
+ function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
1972
+ var SvgSentiment2 = function SvgSentiment2(props) {
1973
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
1974
+ width: 27,
1975
+ height: 26,
1976
+ viewBox: "0 0 27 26",
1977
+ fill: "none",
1978
+ xmlns: "http://www.w3.org/2000/svg"
1979
+ }, props), _g$9 || (_g$9 = /*#__PURE__*/React__namespace.createElement("g", {
1980
+ clipPath: "url(#clip0_21_19130)"
1981
+ }, /*#__PURE__*/React__namespace.createElement("path", {
1982
+ d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
1983
+ fill: "#F2C1C3"
1984
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1985
+ d: "M18.7975 21.5782C18.7643 21.4489 17.9361 18.4155 13.2768 18.4155C8.61687 18.4155 7.78932 21.4489 7.75612 21.5782C7.73674 21.6544 7.74333 21.7347 7.77489 21.807C7.80644 21.8792 7.86124 21.9393 7.93093 21.9783C8.001 22.0168 8.08189 22.0322 8.1616 22.0222C8.24131 22.0121 8.3156 21.9773 8.37347 21.9227C8.38748 21.9089 9.81468 20.5822 13.2768 20.5822C16.739 20.5822 18.1669 21.9089 18.1802 21.9219C18.2373 21.9772 18.3112 22.0128 18.3907 22.0233C18.4703 22.0339 18.5512 22.0188 18.6213 21.9804C18.6916 21.9415 18.7469 21.8811 18.7787 21.8084C18.8106 21.7358 18.8172 21.6549 18.7975 21.5782V21.5782ZM11.5856 12.4883C9.18479 10.1374 5.32657 10.11 5.16357 10.11C4.97366 10.1182 4.7943 10.1978 4.66285 10.3323C4.5314 10.4668 4.45798 10.6457 4.45789 10.8319C4.45779 11.018 4.53102 11.197 4.66234 11.3316C4.79365 11.4662 4.97293 11.546 5.16283 11.5544C5.18422 11.5544 6.58265 11.5703 8.10057 12.0867C7.66319 12.5489 7.37628 13.2668 7.37628 14.0822C7.37628 15.479 8.20162 16.61 9.2202 16.61C10.2388 16.61 11.0641 15.479 11.0641 14.0822C11.0641 13.9565 11.0501 13.8367 11.0368 13.716C11.0464 13.716 11.0553 13.7211 11.0641 13.7211C11.2101 13.7214 11.3529 13.6792 11.4744 13.5999C11.5959 13.5206 11.6906 13.4078 11.7465 13.2757C11.8024 13.1436 11.8169 12.9982 11.7883 12.858C11.7596 12.7178 11.6891 12.5891 11.5856 12.4883V12.4883ZM21.3901 10.11C21.2271 10.11 17.3696 10.1374 14.9681 12.4883C14.8646 12.5891 14.794 12.7178 14.7654 12.858C14.7367 12.9982 14.7513 13.1436 14.8072 13.2757C14.863 13.4078 14.9577 13.5206 15.0792 13.5999C15.2007 13.6792 15.3435 13.7214 15.4895 13.7211C15.4991 13.7211 15.5072 13.716 15.5161 13.716C15.5043 13.8367 15.4895 13.9565 15.4895 14.0822C15.4895 15.479 16.3149 16.61 17.3335 16.61C18.352 16.61 19.1774 15.479 19.1774 14.0822C19.1774 13.2668 18.8905 12.5489 18.4531 12.0867C19.4008 11.77 20.3908 11.5907 21.3916 11.5544C21.4884 11.5543 21.5843 11.5356 21.6738 11.4992C21.7632 11.4628 21.8445 11.4095 21.9129 11.3424C21.9813 11.2753 22.0356 11.1956 22.0725 11.1079C22.1095 11.0203 22.1285 10.9263 22.1284 10.8315C22.1283 10.7366 22.1091 10.6427 22.072 10.5552C22.0348 10.4676 21.9804 10.388 21.9118 10.321C21.8433 10.254 21.7619 10.2009 21.6724 10.1647C21.5829 10.1285 21.4869 10.1099 21.3901 10.11V10.11Z",
1986
+ fill: "#2F3941"
1987
+ }))), _defs$6 || (_defs$6 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
1988
+ id: "clip0_21_19130"
1989
+ }, /*#__PURE__*/React__namespace.createElement("rect", {
1990
+ width: 26.5525,
1991
+ height: 26,
1992
+ fill: "white"
1993
+ })))));
1994
+ };
1995
+
1996
+ var _g$8, _defs$5;
1997
+ function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
1998
+ var SvgSentiment3 = function SvgSentiment3(props) {
1999
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
2000
+ width: 27,
2001
+ height: 26,
2002
+ viewBox: "0 0 27 26",
2003
+ fill: "none",
2004
+ xmlns: "http://www.w3.org/2000/svg"
2005
+ }, props), _g$8 || (_g$8 = /*#__PURE__*/React__namespace.createElement("g", {
2006
+ clipPath: "url(#clip0_21_19129)"
2007
+ }, /*#__PURE__*/React__namespace.createElement("path", {
2008
+ d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
2009
+ fill: "#FFD7A4"
2010
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2011
+ d: "M8.16472 13.7641C9.18309 13.7641 10.0086 12.6323 10.0086 11.2363C10.0086 9.84022 9.18309 8.7085 8.16472 8.7085C7.14635 8.7085 6.3208 9.84022 6.3208 11.2363C6.3208 12.6323 7.14635 13.7641 8.16472 13.7641Z",
2012
+ fill: "#2F3941"
2013
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2014
+ d: "M17.7531 13.7641C18.7715 13.7641 19.597 12.6323 19.597 11.2363C19.597 9.84022 18.7715 8.7085 17.7531 8.7085C16.7347 8.7085 15.9092 9.84022 15.9092 11.2363C15.9092 12.6323 16.7347 13.7641 17.7531 13.7641Z",
2015
+ fill: "#2F3941"
2016
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2017
+ d: "M18.122 18.0978H7.79604C7.60043 18.0978 7.41282 18.0217 7.2745 17.8862C7.13618 17.7508 7.05847 17.5671 7.05847 17.3755C7.05847 17.184 7.13618 17.0003 7.2745 16.8649C7.41282 16.7294 7.60043 16.6533 7.79604 16.6533H18.122C18.3176 16.6533 18.5052 16.7294 18.6435 16.8649C18.7819 17.0003 18.8596 17.184 18.8596 17.3755C18.8596 17.5671 18.7819 17.7508 18.6435 17.8862C18.5052 18.0217 18.3176 18.0978 18.122 18.0978Z",
2018
+ fill: "#2F3941"
2019
+ }))), _defs$5 || (_defs$5 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
2020
+ id: "clip0_21_19129"
2021
+ }, /*#__PURE__*/React__namespace.createElement("rect", {
2022
+ width: 26.5525,
2023
+ height: 26,
2024
+ fill: "white"
2025
+ })))));
2026
+ };
2027
+
2028
+ var _g$7, _defs$4;
2029
+ function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
2030
+ var SvgSentiment4 = function SvgSentiment4(props) {
2031
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
2032
+ width: 27,
2033
+ height: 26,
2034
+ viewBox: "0 0 27 26",
2035
+ fill: "none",
2036
+ xmlns: "http://www.w3.org/2000/svg"
2037
+ }, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
2038
+ clipPath: "url(#clip0_21_19127)"
2039
+ }, /*#__PURE__*/React__namespace.createElement("path", {
2040
+ d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
2041
+ fill: "#B3E8D9"
2042
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2043
+ d: "M7.75559 16.8093C7.78879 16.9386 8.61708 19.9719 13.2763 19.9719C17.9363 19.9719 18.7638 16.9386 18.797 16.8093C18.8164 16.7331 18.8098 16.6527 18.7782 16.5805C18.7467 16.5083 18.6919 16.4481 18.6222 16.4092C18.5522 16.3704 18.4713 16.3549 18.3915 16.3649C18.3117 16.3749 18.2374 16.41 18.1797 16.4648C18.1656 16.4785 16.7384 17.8052 13.2763 17.8052C9.81415 17.8052 8.38622 16.4785 8.37294 16.4655C8.31584 16.4103 8.24194 16.3747 8.16239 16.3641C8.08283 16.3536 8.00193 16.3686 7.93187 16.407C7.86156 16.4459 7.80623 16.5063 7.77439 16.579C7.74254 16.6517 7.73594 16.7326 7.75559 16.8093Z",
2044
+ fill: "#2F3941"
2045
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2046
+ d: "M8.85076 12.0267C9.86913 12.0267 10.6947 10.895 10.6947 9.49897C10.6947 8.10292 9.86913 6.97119 8.85076 6.97119C7.83239 6.97119 7.00684 8.10292 7.00684 9.49897C7.00684 10.895 7.83239 12.0267 8.85076 12.0267Z",
2047
+ fill: "#2F3941"
2048
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2049
+ d: "M17.7015 12.0267C18.7198 12.0267 19.5454 10.895 19.5454 9.49897C19.5454 8.10292 18.7198 6.97119 17.7015 6.97119C16.6831 6.97119 15.8575 8.10292 15.8575 9.49897C15.8575 10.895 16.6831 12.0267 17.7015 12.0267Z",
2050
+ fill: "#2F3941"
2051
+ }))), _defs$4 || (_defs$4 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
2052
+ id: "clip0_21_19127"
2053
+ }, /*#__PURE__*/React__namespace.createElement("rect", {
2054
+ width: 26.5525,
2055
+ height: 26,
2056
+ fill: "white"
2057
+ })))));
2058
+ };
2059
+
2060
+ var _g$6, _defs$3;
2061
+ function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
2062
+ var SvgSentiment5 = function SvgSentiment5(props) {
2063
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
2064
+ width: 26,
2065
+ height: 26,
2066
+ viewBox: "0 0 26 26",
2067
+ fill: "none",
2068
+ xmlns: "http://www.w3.org/2000/svg"
2069
+ }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
2070
+ clipPath: "url(#clip0_21_19125)"
2071
+ }, /*#__PURE__*/React__namespace.createElement("path", {
2072
+ d: "M25.2051 13C25.2051 20.1796 19.5626 26 12.6025 26C5.64314 26 0 20.1796 0 13C0 5.82111 5.64314 0 12.6025 0C19.5626 0 25.2051 5.82111 25.2051 13Z",
2073
+ fill: "#66D1B3"
2074
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2075
+ d: "M7.36209 16.8093C7.39359 16.9386 8.17985 19.9719 12.6026 19.9719C17.0261 19.9719 17.8117 16.9386 17.8432 16.8093C17.8616 16.7331 17.8553 16.6527 17.8254 16.5805C17.7954 16.5083 17.7434 16.4481 17.6773 16.4092C17.6108 16.3704 17.534 16.3549 17.4583 16.3649C17.3825 16.3749 17.312 16.41 17.2572 16.4648C17.2439 16.4785 15.8891 17.8052 12.6026 17.8052C9.31618 17.8052 7.96071 16.4785 7.94811 16.4655C7.8939 16.4103 7.82375 16.3747 7.74824 16.3641C7.67272 16.3536 7.59592 16.3686 7.52942 16.407C7.46268 16.4459 7.41016 16.5063 7.37993 16.579C7.3497 16.6517 7.34343 16.7326 7.36209 16.8093Z",
2076
+ fill: "#2F3941"
2077
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2078
+ d: "M8.4016 12.0267C9.36829 12.0267 10.152 10.895 10.152 9.49897C10.152 8.10292 9.36829 6.97119 8.4016 6.97119C7.4349 6.97119 6.65125 8.10292 6.65125 9.49897C6.65125 10.895 7.4349 12.0267 8.4016 12.0267Z",
2079
+ fill: "#2F3941"
2080
+ }), /*#__PURE__*/React__namespace.createElement("path", {
2081
+ d: "M16.8032 12.0267C17.7699 12.0267 18.5536 10.895 18.5536 9.49897C18.5536 8.10292 17.7699 6.97119 16.8032 6.97119C15.8365 6.97119 15.0529 8.10292 15.0529 9.49897C15.0529 10.895 15.8365 12.0267 16.8032 12.0267Z",
2082
+ fill: "#2F3941"
2083
+ }))), _defs$3 || (_defs$3 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
2084
+ id: "clip0_21_19125"
2085
+ }, /*#__PURE__*/React__namespace.createElement("rect", {
2086
+ width: 25.2051,
2087
+ height: 26,
2088
+ fill: "white"
2089
+ })))));
2090
+ };
2091
+
2092
+ const Point = styled__default["default"].g `
2093
+ transform: translate(-13px, -13px);
2094
+ `;
2095
+ const ScrollingContainer$1 = styled__default["default"].div `
2096
+ width: 100%;
2097
+ overflow-x: scroll;
2098
+ `;
2099
+ const SentimentContainer = styled__default["default"](ChartContainer) `
2100
+ /* Show dotted lines */
2101
+ svg > g > g:nth-child(2) > line {
2102
+ stroke-dasharray: 2;
2103
+ }
2104
+
2105
+ /* Show first and last vertical lines */
2106
+ svg > g > g:first-child > line:first-child {
2107
+ transform: translate(2px, 0);
2108
+ stroke-dasharray: 2;
2109
+ }
2110
+
2111
+ svg > g > g:first-child > line:last-child {
2112
+ transform: translate(-2px, 0);
2113
+ stroke-dasharray: 2;
2114
+ }
2115
+
2116
+ /* Show first and last horizontal lines */
2117
+ svg > g > g:nth-child(2) > line:first-child {
2118
+ transform: translate(0, -6px);
2119
+ }
2120
+
2121
+ svg > g > g:nth-child(2) > line:last-child {
2122
+ transform: translate(0, 2px);
2123
+ }
2124
+ `;
2125
+ const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 };
2126
+ const formatSentiment = (value, i18n) => {
2127
+ var _a, _b, _c, _d, _e;
2128
+ switch (value) {
2129
+ case 1:
2130
+ return (_a = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.veryNegative) !== null && _a !== void 0 ? _a : "Very Negative";
2131
+ case 2:
2132
+ return (_b = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.negative) !== null && _b !== void 0 ? _b : "Negative";
2133
+ case 3:
2134
+ return (_c = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.neutral) !== null && _c !== void 0 ? _c : "Neutral";
2135
+ case 4:
2136
+ return (_d = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.positive) !== null && _d !== void 0 ? _d : "Positive";
2137
+ case 5:
2138
+ return (_e = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.veryPositive) !== null && _e !== void 0 ? _e : "Very Positive";
2139
+ default:
2140
+ return "";
2141
+ }
2142
+ };
2143
+ const formatPoint = (value) => {
2144
+ switch (value) {
2145
+ case 1:
2146
+ return jsxRuntime.jsx(SvgSentiment1, { style: { width: "16px" } });
2147
+ case 2:
2148
+ return jsxRuntime.jsx(SvgSentiment2, { style: { width: "16px" } });
2149
+ case 3:
2150
+ return jsxRuntime.jsx(SvgSentiment3, { style: { width: "16px" } });
2151
+ case 4:
2152
+ return jsxRuntime.jsx(SvgSentiment4, { style: { width: "16px" } });
2153
+ case 5:
2154
+ return jsxRuntime.jsx(SvgSentiment5, { style: { width: "16px" } });
2155
+ default:
2156
+ return jsxRuntime.jsx(jsxRuntime.Fragment, {});
2157
+ }
2158
+ };
2159
+ const formatAxisX = (value) => {
2160
+ // This is to avoid printing the first and last value of the axis to make room for the chart (2 empty columns)
2161
+ if (!value || value === "start" || value === "end")
2162
+ return "";
2163
+ //Print only the first 10 characters
2164
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [value.toString().length > 15 ? value.toString().substring(0, 15) + "..." : value.toString(), jsxRuntime.jsx("title", { children: value })] }));
2165
+ };
2166
+ const SentimentChart = ({ data, width, height, margin, tooltip, i18n, }) => {
2167
+ var _a;
2168
+ const theme = React.useContext(styled.ThemeContext);
2169
+ return (jsxRuntime.jsx(ScrollingContainer$1, { children: jsxRuntime.jsx(SentimentContainer, Object.assign({ width: width, height: height, id: "chart-container", style: { overflow: "hidden" } }, { children: jsxRuntime.jsx(line.ResponsiveLine, { theme: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { fontSize: theme.fontSizes.sm, axis: {
2170
+ legend: {
2171
+ text: {
2172
+ fill: getColor(theme.colors.primaryHue, 600),
2173
+ fontSize: theme.fontSizes.md,
2174
+ },
2175
+ },
2176
+ }, grid: {
2177
+ line: {
2178
+ stroke: theme.palette.grey[400],
2179
+ strokeWidth: 1,
2180
+ },
2181
+ } }), curve: "monotoneX", colors: theme.palette.grey[600], data: [{
2182
+ id: data.id,
2183
+ data: [
2184
+ {
2185
+ x: "start",
2186
+ },
2187
+ ...data.data,
2188
+ {
2189
+ x: "end",
2190
+ }
2191
+ ]
2192
+ }
2193
+ ], margin: Object.assign(Object.assign({}, DEFAULT_CHART_MARGINS), margin), gridXValues: 1, gridYValues: 5, yScale: {
2194
+ type: "linear",
2195
+ min: 0,
2196
+ max: 6,
2197
+ }, axisBottom: {
2198
+ tickSize: 0,
2199
+ tickPadding: 10,
2200
+ format: (value) => formatAxisX(value),
2201
+ }, axisLeft: {
2202
+ tickSize: 0,
2203
+ tickPadding: 10,
2204
+ format: () => "",
2205
+ }, pointSymbol: ({ datum }) => {
2206
+ var _a;
2207
+ return jsxRuntime.jsx(Point, { children: formatPoint((_a = datum.y) !== null && _a !== void 0 ? _a : "") });
2208
+ },
2209
+ // To use the tooltip, we need to set "useMesh" to true and "enableSlices" to "false"
2210
+ tooltip: tooltip ? (node) => {
2211
+ var _a, _b;
2212
+ const point = node.point.data;
2213
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
2214
+ value: formatSentiment(point.y, i18n),
2215
+ label: point.x.toString(),
2216
+ data: {
2217
+ customData: (_a = data.data[node.point.index].custom_data) !== null && _a !== void 0 ? _a : undefined,
2218
+ yValue: (_b = point.y.toString()) !== null && _b !== void 0 ? _b : "",
2219
+ icon: formatPoint(point.y),
2220
+ sentimentText: formatSentiment(point.y, i18n),
2221
+ }
2222
+ }) }));
2223
+ } : undefined, sliceTooltip: tooltip ? (e) => {
2224
+ var _a;
2225
+ const point = e.slice.points[0].data;
2226
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
2227
+ value: formatSentiment(point.y, i18n),
2228
+ label: point.xFormatted,
2229
+ data: {
2230
+ customData: (_a = point.custom_data) !== null && _a !== void 0 ? _a : undefined,
2231
+ yValue: point.yFormatted,
2232
+ icon: formatPoint(point.y),
2233
+ sentimentText: formatSentiment(point.y, i18n),
2234
+ }
2235
+ }) }));
2236
+ } : undefined, markers: [
2237
+ {
2238
+ axis: 'y',
2239
+ legend: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.neutral) !== null && _a !== void 0 ? _a : "Neutral",
2240
+ legendPosition: 'bottom-left',
2241
+ lineStyle: {
2242
+ stroke: theme.palette.blue[600],
2243
+ strokeWidth: 1,
2244
+ strokeDasharray: 2,
2245
+ },
2246
+ textStyle: {
2247
+ fill: theme.palette.blue[600],
2248
+ fontSize: theme.fontSizes.sm,
2249
+ },
2250
+ value: 3
2251
+ },
2252
+ {
2253
+ axis: 'y',
2254
+ legendPosition: 'bottom-left',
2255
+ lineStyle: {
2256
+ stroke: "white",
2257
+ strokeWidth: 2,
2258
+ },
2259
+ value: 0
2260
+ },
2261
+ {
2262
+ axis: 'y',
2263
+ legendPosition: 'bottom-left',
2264
+ lineStyle: {
2265
+ stroke: "white",
2266
+ strokeWidth: 2,
2267
+ },
2268
+ value: 6
2269
+ },
2270
+ {
2271
+ axis: 'x',
2272
+ legendPosition: 'bottom-left',
2273
+ lineStyle: {
2274
+ stroke: "white",
2275
+ strokeWidth: 2,
2276
+ },
2277
+ value: "start"
2278
+ },
2279
+ {
2280
+ axis: 'x',
2281
+ legendPosition: 'bottom-left',
2282
+ lineStyle: {
2283
+ stroke: "white",
2284
+ strokeWidth: 2,
2285
+ },
2286
+ value: "end"
2287
+ }
2288
+ ], enableCrosshair: false, isInteractive: true, enableSlices: "x" }) })) }));
2289
+ };
2290
+
1942
2291
  const UgClose$1 = styled__default["default"](reactNotifications.Close) `
1943
2292
  display: flex;
1944
2293
  align-items: center;
@@ -5725,6 +6074,7 @@ exports.RadioCard = RadioCard;
5725
6074
  exports.Row = Row$1;
5726
6075
  exports.SM = SM;
5727
6076
  exports.Select = Select;
6077
+ exports.SentimentChart = SentimentChart;
5728
6078
  exports.Separator = Separator;
5729
6079
  exports.ServiceCard = ServiceCard;
5730
6080
  exports.Sidebar = Sidebar;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { ButtonArgs } from "./_types";
3
2
  export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
4
3
  export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
@@ -1,6 +1,6 @@
1
- import React from "react";
1
+ import React, { ReactNode } from "react";
2
2
  export type ChartTooltipFunction = ({ value, label, data, }: {
3
- value: number;
3
+ value: string | number;
4
4
  label: string | number;
5
- data?: Record<string, string | number | undefined>;
5
+ data?: Record<string, string | number | ReactNode | undefined>;
6
6
  }) => React.ReactNode;
@@ -0,0 +1,9 @@
1
+ export type Data = {
2
+ id: string;
3
+ data: {
4
+ x: string;
5
+ y: number;
6
+ custom_data?: string;
7
+ }[];
8
+ };
9
+ export declare const data: Data;
@@ -0,0 +1,31 @@
1
+ import { ChartTooltipFunction } from "../_types";
2
+ type SentimentData = {
3
+ id: string;
4
+ data: {
5
+ x: string;
6
+ y?: number;
7
+ custom_data?: string;
8
+ }[];
9
+ };
10
+ export interface SentimentChartProps {
11
+ data: SentimentData;
12
+ width: string;
13
+ height: string;
14
+ margin?: {
15
+ top?: number;
16
+ right?: number;
17
+ bottom?: number;
18
+ left?: number;
19
+ };
20
+ tooltip?: ChartTooltipFunction;
21
+ i18n?: {
22
+ sentimentsValues: {
23
+ veryPositive: string;
24
+ positive: string;
25
+ neutral: string;
26
+ negative: string;
27
+ veryNegative: string;
28
+ };
29
+ };
30
+ }
31
+ export {};
@@ -0,0 +1,2 @@
1
+ import { SentimentChartProps } from "./_types";
2
+ export declare const SentimentChart: ({ data, width, height, margin, tooltip, i18n, }: SentimentChartProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { SentimentChartProps } from "./_types";
2
+ export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SentimentChartProps>;
3
+ export declare const WithCustomTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SentimentChartProps>;
4
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SentimentChartProps>;
5
+ export default _default;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { DropdownArgs, SelectArgs } from "./_types";
3
2
  import { MenuArgs } from "../menu/_types";
4
3
  interface IItem {
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { EditorArgs } from "./_types";
3
2
  interface EditorStoryArgs extends EditorArgs {
4
3
  children?: any;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { TooltipArgs } from "./_types";
3
2
  export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TooltipArgs>;
4
3
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const AnchorTag: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
3
2
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
4
3
  [x: string]: any;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
3
2
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
4
3
  [x: string]: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "3.1.46",
3
+ "version": "3.1.47",
4
4
  "description": "",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",