oa-componentbook 0.17.99 → 0.17.100

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/build/components/oa-component-bar-chart/BarChart.js +40 -32
  2. package/build/hooks/useResizeObserver.js +11 -0
  3. package/package.json +1 -1
package/build/components/oa-component-bar-chart/BarChart.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  require("core-js/modules/es.weak-map.js");
4
- require("core-js/modules/web.dom-collections.iterator.js");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = BarChart;
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
9
  require("core-js/modules/es.array.reduce.js");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var ReactDOMServer = _interopRequireWildcard(require("react-dom/server"));
@@ -23,11 +23,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
23
23
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
24
24
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
25
25
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
26
- const iconHtml = ReactDOMServer.renderToString( /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
27
- icon: _ExpandLess.default,
28
- size: 20
29
- }));
30
- const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n\n .black {\n color: var(--color-primary-content);\n }\n"])));
26
+ // const iconHtml = ReactDOMServer.renderToString(<MaterialIcon icon={ExpandLessIcon} size={20} />);
27
+
28
+ const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \n display: inline-block;\n position: relative;\n width: 100%;\n padding-bottom: 100%;\n vertical-align: top;\n overflow: hidden;\n\n .bar-chart-svg {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n /* Styling for the dashed lines */\n .tick line{\n stroke: var(--color-placeholder-text);\n stroke-dasharray: 3,6;\n }\n\n .black {\n color: var(--color-primary-content);\n }\n"])));
31
29
  function BarChart(_ref) {
32
30
  var _barsConfig$length, _barsConfig$length2;
33
31
  let {
@@ -38,8 +36,8 @@ function BarChart(_ref) {
38
36
  yLabel,
39
37
  xLabel
40
38
  } = _ref;
41
- const height = 420;
42
- const width = 600;
39
+ const [height, setHeight] = (0, _react.useState)(400);
40
+ const [width, setWidth] = (0, _react.useState)(600);
43
41
  const barSpacing = 32;
44
42
  const marginBottom = 32;
45
43
  const marginTop = 32;
@@ -73,21 +71,20 @@ function BarChart(_ref) {
73
71
  */
74
72
  const xScale = d3.scaleBand().domain(barsConfig.map(barConfig => barConfig.label)).range([0, availableWidth]).padding(barSpacingInPercentage); // Inner and outer paddings are equal for symmmetry
75
73
 
76
- (0, _react.useEffect)(() => {
74
+ const updateChartDimensions = barChartSvg => {
75
+ console.log('updateChartDimensions');
76
+ console.log('updateChartDimensions');
77
77
  // Adding the svg element on first render.
78
- const barChartSvg = d3.select(barChartRef.current).append('svg') // If we chain methods after this one, we will be executing commands on the 'svg' element.
79
- .attr('width', width) // Make these dimensions responsive
80
- .attr('height', height);
81
-
82
- // Adding the X axis.
83
- const xAxis = barChartSvg.append('g').attr('id', 'x-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(height - marginBottom, ")"));
84
- const yAxis = barChartSvg.append('g').attr('id', 'y-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop, ")"));
85
- const yAxisLabel = barChartSvg.append('text').classed('type-b2-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']).attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop - _TypographiesMap.default['type-b2-400']['line-height'], ")")).text(yLabel);
86
- // Removing the svg element, as a cleanup operation, before dismount.
87
- return () => {
88
- barChartSvg.remove();
89
- };
90
- });
78
+ barChartSvg.attr('viewBox', "0 0 ".concat(width, " ").concat(height)).attr('preserveAspectRatio', 'xMidYMid meet');
79
+ };
80
+ const addAxesLabel = barChartSvg => {
81
+ const yAxisLabel = barChartSvg.append('text').attr('id', 'y-axis-label').classed('type-b2-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']);
82
+ };
83
+ const updateAxesPosition = barChartSvg => {
84
+ const xAxis = barChartSvg.select('#x-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(height - marginBottom, ")"));
85
+ const yAxis = barChartSvg.select('#y-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop, ")"));
86
+ const yAxisLabel = barChartSvg.select('#y-axis-label').attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop - _TypographiesMap.default['type-b2-400']['line-height'], ")")).text(yLabel);
87
+ };
91
88
  const updateBars = barChartSvg => {
92
89
  barChartSvg.selectAll('rect').data(barsConfig) // Performing a data join for an array of objects.
93
90
  .join('rect').attr('x', (d, i) => marginRight + xScale(d.label)).attr('y', (d, i) => marginBottom + yScale(d.value)).attr('height', d => availableHeight - yScale(d.value)).attr('width', widthOfEachBar).style('fill', d => {
@@ -95,7 +92,7 @@ function BarChart(_ref) {
95
92
  return _ColorVariablesMap.default["--color-".concat((_d$color = d === null || d === void 0 ? void 0 : d.color) !== null && _d$color !== void 0 ? _d$color : 'warning')];
96
93
  });
97
94
  };
98
- const updateAxes = () => {
95
+ const updateAxesConfiguration = () => {
99
96
  const xAxisRef = d3.select('#x-axis');
100
97
  const yAxisRef = d3.select('#y-axis');
101
98
 
@@ -105,9 +102,10 @@ function BarChart(_ref) {
105
102
  tickSize sets both at once
106
103
  */
107
104
 
108
- const yAxisConfiguration = d3.axisLeft(yScale).tickSize(0).tickPadding(16).tickFormat(_utils.rupeeShorthandFormatter);
105
+ const yAxisConfiguration = d3.axisLeft(yScale).tickSizeInner(-(width - marginRight)).tickSizeOuter(0).tickPadding(16).tickFormat(_utils.rupeeShorthandFormatter);
109
106
  const yAxis = yAxisRef.call(yAxisConfiguration);
110
- const yAxisSymbol = yAxisRef.append('g').html(iconHtml);
107
+
108
+ // const yAxisSymbol = yAxisRef.append('g').html(iconHtml);
111
109
  // .attr("y", 0 – margin.left)
112
110
  // .attr("x",0 - (height / 2))
113
111
  // .attr("dy", "1em")
@@ -118,15 +116,25 @@ function BarChart(_ref) {
118
116
  const xAxis = xAxisRef.call(xAxisConfiguration);
119
117
  };
120
118
  (0, _react.useEffect)(() => {
121
- // D3 code to create the graph
122
- const barChartSvg = d3.select(barChartRef.current).select('svg');
123
- updateBars(barChartSvg);
124
- updateAxes();
125
- }, [barsConfig]); // Empty dependency array so that this code is called on every re-render
126
-
119
+ const barChartSvgReference = d3.select(barChartRef.current).select('svg');
120
+ addAxesLabel(barChartSvgReference);
121
+ }, []);
122
+ (0, _react.useEffect)(() => {
123
+ const barChartSvgReference = d3.select(barChartRef.current).select('svg');
124
+ updateChartDimensions(barChartSvgReference);
125
+ updateAxesPosition(barChartSvgReference);
126
+ updateAxesConfiguration();
127
+ updateBars(barChartSvgReference);
128
+ });
127
129
  return /*#__PURE__*/_react.default.createElement(FullSizeContainer, {
128
130
  ref: barChartRef
129
- });
131
+ }, /*#__PURE__*/_react.default.createElement("svg", {
132
+ className: "bar-chart-svg"
133
+ }, /*#__PURE__*/_react.default.createElement("g", {
134
+ id: "x-axis"
135
+ }), /*#__PURE__*/_react.default.createElement("g", {
136
+ id: "y-axis"
137
+ })));
130
138
  }
131
139
  BarChart.propTypes = {
132
140
  barsConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
package/build/hooks/useResizeObserver.js ADDED
@@ -0,0 +1,11 @@
1
+ // function createResizeObserver() {
2
+
3
+ // }
4
+
5
+ // function useResizeObserver(
6
+ // targetElement,
7
+ // callback
8
+ // ) {
9
+ // const resizeObserver = getResizeObserver();
10
+ // }
11
+ "use strict";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.17.99",
3
+ "version": "0.17.100",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",