@appquality/unguess-design-system 3.1.45 → 3.1.47-sentiment-beta
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 +0 -13
- package/build/index.d.ts +1 -0
- package/build/index.js +383 -31
- package/build/stories/buttons/button/index.stories.d.ts +0 -1
- package/build/stories/charts/_types.d.ts +3 -3
- package/build/stories/charts/sentiment/_data.d.ts +9 -0
- package/build/stories/charts/sentiment/_types.d.ts +31 -0
- package/build/stories/charts/sentiment/index.d.ts +2 -0
- package/build/stories/charts/sentiment/index.stories.d.ts +5 -0
- package/build/stories/dropdowns/select/index.stories.d.ts +0 -1
- package/build/stories/editor/index.stories.d.ts +0 -1
- package/build/stories/tooltip/index.stories.d.ts +0 -1
- package/build/stories/typography/typescale/anchortag/index.stories.d.ts +0 -1
- package/build/stories/typography/typescale/index.stories.d.ts +0 -1
- package/package.json +1 -1
- package/yarn-error.log +13958 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,16 +1,3 @@
|
|
|
1
|
-
# v3.1.42 (Thu Aug 24 2023)
|
|
2
|
-
|
|
3
|
-
#### 🐛 Bug Fix
|
|
4
|
-
|
|
5
|
-
- Improve fullscreen experience of player [#263](https://github.com/AppQuality/unguess-design-system/pull/263) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
-
- New-player-with-old-skin [#262](https://github.com/AppQuality/unguess-design-system/pull/262) ([@cannarocks](https://github.com/cannarocks))
|
|
7
|
-
|
|
8
|
-
#### Authors: 1
|
|
9
|
-
|
|
10
|
-
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
1
|
# v3.1.4 (Wed Aug 23 2023)
|
|
15
2
|
|
|
16
3
|
#### 🐛 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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
994
|
-
function _extends$
|
|
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$
|
|
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$
|
|
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$
|
|
1066
|
-
function _extends$
|
|
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$
|
|
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$
|
|
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;
|
|
@@ -4447,14 +4796,16 @@ const StyledDiv$2 = styled__default["default"].div `
|
|
|
4447
4796
|
align-items: center;
|
|
4448
4797
|
`;
|
|
4449
4798
|
const Controls = ({ container, }) => {
|
|
4450
|
-
var _a, _b;
|
|
4799
|
+
var _a, _b, _c;
|
|
4451
4800
|
const [progress, setProgress] = React.useState(0);
|
|
4452
4801
|
const [tooltipMargin, setTooltipMargin] = React.useState(0);
|
|
4453
4802
|
const [tooltipLabel, setTooltipLabel] = React.useState("00:00");
|
|
4454
4803
|
const progressRef = React.useRef(null);
|
|
4455
4804
|
const { context, setCurrentTime } = Video.useVideoContext();
|
|
4456
|
-
const relCurrentTime = ((
|
|
4457
|
-
|
|
4805
|
+
const relCurrentTime = ((_a = context.player) === null || _a === void 0 ? void 0 : _a.currentTime)
|
|
4806
|
+
? ((_b = context.player) === null || _b === void 0 ? void 0 : _b.currentTime) - context.part.start
|
|
4807
|
+
: 0;
|
|
4808
|
+
const duration = context.part.end - context.part.start || ((_c = context.player) === null || _c === void 0 ? void 0 : _c.totalTime) || 0; //relative
|
|
4458
4809
|
const getVideoPositionFromEvent = (clientX) => {
|
|
4459
4810
|
if (progressRef && progressRef.current && duration) {
|
|
4460
4811
|
const bounds = progressRef.current.getBoundingClientRect();
|
|
@@ -5723,6 +6074,7 @@ exports.RadioCard = RadioCard;
|
|
|
5723
6074
|
exports.Row = Row$1;
|
|
5724
6075
|
exports.SM = SM;
|
|
5725
6076
|
exports.Select = Select;
|
|
6077
|
+
exports.SentimentChart = SentimentChart;
|
|
5726
6078
|
exports.Separator = Separator;
|
|
5727
6079
|
exports.ServiceCard = ServiceCard;
|
|
5728
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;
|