sag_components 1.0.501 → 1.0.504

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 (3) hide show
  1. package/dist/stories/components/Button.js +2 -2
  2. package/dist/stories/components/TotalDoughnutChart.js +30 -29
  3. package/package.json +1 -1
package/dist/stories/components/Button.js CHANGED
@@ -88,7 +88,7 @@ const Button = props => {
88
88
  },
89
89
  variant: shape,
90
90
  size: size,
91
- disabled: !!disabled,
91
+ disabled: disabled,
92
92
  onClick: event => {
93
93
  onClick(event);
94
94
  }
@@ -105,7 +105,7 @@ Button.defaultProps = {
105
105
  size: 'small',
106
106
  height: '50px',
107
107
  width: 'auto',
108
- disabled: true,
108
+ disabled: false,
109
109
  radius: 30,
110
110
  textColor: '#212121',
111
111
  backgroundColor: 'transparent',
package/dist/stories/components/TotalDoughnutChart.js CHANGED
@@ -31,26 +31,26 @@ const TotalDoughnutChart = props => {
31
31
  } = props;
32
32
  const DEFAULT_ROOT_FONT = 18;
33
33
  const DEFAULT_COMPONENT_WIDTH = 250;
34
- const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
35
- const controlsContainerRef = (0, _react.useRef)();
36
- const getRootFont = scopeWidth => {
37
- const relation = scopeWidth.toString().replace('px', '').replace('%', '') / DEFAULT_COMPONENT_WIDTH;
38
- const fontRoot = (DEFAULT_ROOT_FONT * relation).toString().concat('', 'px');
39
- return fontRoot;
40
- };
34
+ const [DoughnutChartRadius, setDoughnutChartRadius] = (0, _react.useState)(0);
35
+ const DoughnutChartContainerRef = (0, _react.useRef)();
41
36
  const dotCutTrenty = row => dotCut ? (0, _CommonFunctions.getFormattedValue)(row.value) : (0, _CommonFunctions.getNumberWithCommas)(row.value);
42
37
  (0, _react.useEffect)(() => {
43
38
  const {
44
39
  offsetWidth
45
- } = controlsContainerRef.current;
46
- setRootFont(getRootFont(offsetWidth));
47
- }, [width]);
40
+ } = DoughnutChartContainerRef.current;
41
+ const {
42
+ offsetHeight
43
+ } = DoughnutChartContainerRef.current;
44
+ console.log("offsetWidth", offsetWidth, offsetHeight);
45
+ const radius = offsetWidth > offsetHeight ? offsetHeight / 2 : offsetWidth / 2;
46
+ setDoughnutChartRadius(radius);
47
+ }, [width, height]);
48
48
  return /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.ControlsContainer, {
49
49
  id: "ControlsContainer",
50
50
  height: height,
51
51
  width: width,
52
- textcolor: textcolor,
53
- ref: controlsContainerRef
52
+ textcolor: textcolor
53
+ // ref={DoughnutChartContainerRef}
54
54
  }, (legendData === null || legendData === void 0 ? void 0 : legendData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.Controls, {
55
55
  id: "Controls",
56
56
  height: height,
@@ -67,20 +67,21 @@ const TotalDoughnutChart = props => {
67
67
  width: width
68
68
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.CurrencySign, {
69
69
  id: "CurrencySign"
70
- }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ''), dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ''), addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartAndLegendContainer, {
70
+ }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), addingBenchmark && /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, null))), /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChartAndLegendContainer, {
71
71
  id: "DoughnutChartAndLegendContainer"
72
72
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.DoughnutChart, {
73
73
  id: "DoughnutChart",
74
74
  width: width,
75
- height: height
75
+ height: height,
76
+ ref: DoughnutChartContainerRef
76
77
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, null, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
77
78
  fill: "#8884d8",
78
79
  dataKey: "value",
79
80
  blendStroke: true,
80
81
  startAngle: -270,
81
82
  data: legendData,
82
- outerRadius: rootFont.toString().replace('px', '') * 2,
83
- innerRadius: rootFont.toString().replace('px', '') * 1.5
83
+ outerRadius: DoughnutChartRadius - 4,
84
+ innerRadius: DoughnutChartRadius - DoughnutChartRadius / 3
84
85
  }, legendData.map(row => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
85
86
  key: "cell-".concat(row.name),
86
87
  fill: row.color
@@ -101,35 +102,35 @@ const TotalDoughnutChart = props => {
101
102
  }, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendTitle, {
102
103
  id: "LegendTitle",
103
104
  style: {
104
- flexDirection: itemsValuesSeparateLine ? 'column' : 'row',
105
- alignItems: itemsValuesSeparateLine ? 'baseline' : 'center'
105
+ flexDirection: itemsValuesSeparateLine ? "column" : "row",
106
+ alignItems: itemsValuesSeparateLine ? "baseline" : "center"
106
107
  }
107
108
  }, row.name, /*#__PURE__*/_react.default.createElement(_TotalDoughnutChart.LegendFormattedValue, {
108
109
  id: "LegendFormattedValue",
109
110
  style: {
110
- fontWeight: itemsBoldedValues ? '700' : '500'
111
+ fontWeight: itemsBoldedValues ? "700" : "500"
111
112
  }
112
- }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : '', row.value !== undefined && row.value !== null ? dotCutTrenty(row) : 'No Data', row.value !== undefined && row.value !== null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : '', itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)"))))))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
113
+ }, currencySign ? (0, _CommonFunctions.getCurrencySign)(currencyType, row.value) : "", row.value !== undefined && row.value !== null ? dotCutTrenty(row) : "No Data", row.value !== undefined && row.value !== null && dotCut ? (0, _CommonFunctions.getFormattedUnits)(row.value) : "", itemsPercentagesValueAside && " (".concat(Math.round(row.value / value * 100), "%)"))))))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
113
114
  noDataText: noDataText
114
115
  }));
115
116
  };
116
117
  exports.TotalDoughnutChart = TotalDoughnutChart;
117
118
  var _default = exports.default = TotalDoughnutChart;
118
119
  TotalDoughnutChart.defaultProps = {
119
- title: '',
120
+ title: "",
120
121
  value: 0,
121
122
  addingBenchmark: false,
122
123
  dotCut: false,
123
124
  currencySign: false,
124
- currencyType: 'USD',
125
+ currencyType: "USD",
125
126
  legendData: [],
126
127
  itemsPercentagesValueAside: true,
127
128
  itemsBoldedValues: true,
128
129
  itemsValuesSeparateLine: true,
129
- width: '100%',
130
- height: '100%',
131
- textcolor: '#212121',
132
- noDataText: ''
130
+ width: "100%",
131
+ height: "100%",
132
+ textcolor: "#212121",
133
+ noDataText: ""
133
134
  };
134
135
  function CustomTooltip(_ref) {
135
136
  let {
@@ -143,7 +144,7 @@ function CustomTooltip(_ref) {
143
144
  }
144
145
  }
145
146
  CustomTooltip.defaultProps = {
146
- active: '',
147
- payload: '',
148
- value: ''
147
+ active: "",
148
+ payload: "",
149
+ value: ""
149
150
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.501",
3
+ "version": "1.0.504",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {