@evergis/charts 3.0.20 → 3.0.21

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 Kirill Protasov
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2020 Kirill Protasov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,15 +1,15 @@
-# @evergis/charts
-
-## Важно
-
-- Стилизовать графики необходимо импортируя названия классов из библиотеки.
-
-`import { calendarChartClassNames } from "@evergis/charts"`
-
-## Документация зависимостей
-
-- [d3](https://github.com/d3/d3/blob/master/API.md)
-
-- [styled-components](https://styled-components.com/docs)
-
-- [storybook](https://storybook.js.org/docs/react/writing-docs/docs-page)
+# @evergis/charts
+
+## Важно
+
+- Стилизовать графики необходимо импортируя названия классов из библиотеки.
+
+`import { calendarChartClassNames } from "@evergis/charts"`
+
+## Документация зависимостей
+
+- [d3](https://github.com/d3/d3/blob/master/API.md)
+
+- [styled-components](https://styled-components.com/docs)
+
+- [storybook](https://storybook.js.org/docs/react/writing-docs/docs-page)

package/dist/charts/BarChart/types.d.ts

@@ -26,6 +26,8 @@ export interface BarChartMarker {
     color?: string;
     className?: string;
     horizontal?: boolean;
+    line?: boolean;
+    align?: "center" | "left" | "right";
 }
 export declare type BarChartProps = {
     className?: string;

package/dist/charts.cjs.development.js

@@ -2060,6 +2060,13 @@ const useSelection = (node, props) => {
   const drawing = React.useRef(false);
   const startX = React.useRef(0);
   const selection = React.useRef();
+  const clearSelection = React.useCallback(() => {
+    if (node && selection.current) {
+      drawing.current = false;
+      node.removeChild(selection.current);
+      selection.current = undefined;
+    }
+  }, [node]);
   const onStartDrawing = React.useCallback(e => {
     const isTouch = Boolean(e.touches);
     e.stopPropagation();
@@ -2067,6 +2074,7 @@ const useSelection = (node, props) => {
     if (node && e.which !== 3) {
       var _props$margin$bottom, _props$margin, _e$touches$;
 
+      clearSelection();
       selection.current = document.createElement("div");
       selection.current.setAttribute("class", barChartClassNames.barChartSelection);
       selection.current.setAttribute("style", "height: calc(100% - " + ((_props$margin$bottom = (_props$margin = props.margin) == null ? void 0 : _props$margin.bottom) != null ? _props$margin$bottom : 0) + "px)");
@@ -2138,12 +2146,10 @@ const useSelection = (node, props) => {
       if (max - min > 0 && props.onSelect) {
         props.onSelect([min, max]);
       }
-
-      drawing.current = false;
-      node.removeChild(selection.current);
-      selection.current = undefined;
     }
-  }, [node]);
+
+    clearSelection();
+  }, [node, clearSelection]);
   React.useEffect(() => {
     if (node) {
       node.childNodes.forEach(child => {
@@ -2670,6 +2676,7 @@ const getBars = _ref => {
   return groups.selectAll('rect').data(item => item).join('rect').attr('x', item => item.x).attr('y', item => item.y).attr('width', barWidth).attr('height', item => item.height).style('fill', item => item.color);
 };
 
+const MIN_BAR_HEIGHT = 2;
 const draw$4 = (node, props) => {
   const {
     data,
@@ -2816,7 +2823,8 @@ const draw$4 = (node, props) => {
       drawGridX
     });
     xAxis.attr('transform', "translate(0, " + (yScale(yTicks[0]) + (xAxisPadding || 0)) + ")");
-    const gSvg = svg.append('g').attr('class', barChartClassNames.barChartBarGlobal);
+    svg.append('defs').append('mask').attr('id', 'height-limit-mask').append('rect').attr('width', '100%').attr('height', height - marginBottom + MIN_BAR_HEIGHT).attr('fill', 'white');
+    const gSvg = svg.append('g').attr('class', barChartClassNames.barChartBarGlobal).attr('mask', 'url(#height-limit-mask)');
     const groups = gSvg.selectAll('g').data(marshalledData).enter().append('g').attr('transform', (_, i) => "translate(" + Math.round(xScale(i)) + "," + -(marginTop || 0) + ")");
     const bars = drawBars ? drawBars({
       groups,
@@ -2833,13 +2841,19 @@ const draw$4 = (node, props) => {
       }
 
       if (marker.horizontal) {
-        svg.append('line').style("stroke", marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", marginLeft + yAxisWidth).attr("y1", yScale(marker.value) + 1).attr("x2", width).attr("y2", yScale(marker.value) + 1);
+        if (marker.line) {
+          svg.append('line').style("stroke", marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", marginLeft + yAxisWidth).attr("y1", yScale(marker.value) + 1).attr("x2", width).attr("y2", yScale(marker.value) + 1);
+        }
+
         svg.append("text").attr("y", yScale(marker.value) + 1).attr("x", marginLeft + yAxisWidth).attr('text-anchor', 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
         return;
       }
 
-      svg.append('line').style("stroke", marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", width / data.length * marker.value + 1).attr("y1", 0).attr("x2", width / data.length * marker.value + 1).attr("y2", height - marginTop - marginBottom + marginBottom / 2);
-      svg.append("text").attr("y", height).attr("x", width / data.length * marker.value + 1).attr('text-anchor', 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
+      if (marker.line) {
+        svg.append('line').style("stroke", marker.color || "inherit").style("stroke-width", 1).style("stroke-dasharray", "5, 3").attr("x1", width / data.length * marker.value + 1).attr("y1", 0).attr("x2", width / data.length * marker.value + 1).attr("y2", height - marginTop - marginBottom + marginBottom / 2);
+      }
+
+      svg.append("text").attr("y", height).attr("x", width / data.length * marker.value + 1).attr('text-anchor', marker.align === 'right' ? 'end' : marker.align === 'left' ? 'start' : 'middle').attr("class", ["marker", marker.className].filter(Boolean).join(" ")).style("fill", (marker == null ? void 0 : marker.color) || "inherit").text(marker.label);
     });
     let lines = null;