chartformers 1.0.36

package/README.md

@@ -0,0 +1,112 @@
+# chartformers
+
+[![npm version](https://img.shields.io/npm/v/chartformers)](https://www.npmjs.com/package/chartformers)
+[![npm downloads](https://img.shields.io/npm/dw/chartformers)](https://www.npmjs.com/package/chartformers)
+[![bundlephobia](https://img.shields.io/bundlephobia/minzip/chartformers)](https://bundlephobia.com/package/chartformers)
+[![GitHub stars](https://img.shields.io/github/stars/petrando/chartformers)](https://github.com/petrando/chartformers)
+[![license](https://img.shields.io/npm/l/chartformers)](./LICENSE)
+
+
+**chartformers** is a lightweight React.js library for rendering **interactive, responsive, and animated D3.js charts**.  
+![Demo](https://raw.githubusercontent.com/Petrando/chartformers/master/media/Pie.gif)
+It is designed to simplify chart creation in modern React apps while retaining the full power of D3 under the hood.
+
+## ✨ Features
+- Easy-to-use React components for common chart types  
+- Smooth animated transitions  
+- Small bundle size
+- Full typescript
+- Responsive charts that auto-fit their containers  
+- Simple styling with the included CSS  
+- Powered by D3.js + React
+
+## 📦 Installation
+
+```bash
+npm install chartformers@latest
+```   
+
+To use a bar chart component import these:  
+```bash
+import { BarChart } from 'chartformers';
+import 'chartformers/dist/chartformers.css';
+```
+Render the chart inside a container with explicit width and height:
+```js
+<div className="w-full h-60 md:h-96">
+  <BarChart data={[]} />
+</div>
+```
+
+## Example: sortable stacked bar chart
+```js
+import { StackedBarChart } from "chartformers"; 
+import 'chartformers/dist/chartformers.css';
+
+export default function StackedBarChartExample() {  
+  export const stackData2 = [
+    {
+      label: "Initech",
+      alpha: 14900,
+      beta: 8800,
+      delta: 9600,
+      epsilon: 5400,
+      theta: 6100,
+    },
+    {
+      label: "Umbrella",
+      alpha: 6800,
+      beta: 7400,
+      delta: 17100,
+      epsilon: 9300,
+      theta: 5200,
+    },
+    {
+      label: "Hooli",
+      alpha: 6900,
+      beta: 10400,
+      delta: 7400,
+      epsilon: 16200,
+      theta: 5700,
+    },  
+    {
+      label: "Aperture Labs",
+      alpha: 8200,
+      beta: 9100,
+      delta: 14300,
+      epsilon: 7600,
+      theta: 4600,
+    },  
+    {
+      label: "Cyberdyne Systems",
+      alpha: 18800,
+      beta: 9700,
+      delta: 6900,
+      epsilon: 8300,
+      theta: 6200,
+    },
+    {
+      label: "Massive Dynamic",
+      alpha: 9600,
+      beta: 7800,
+      delta: 4900,
+      epsilon: 7200,
+      theta: 15500,
+    },
+  ];
+
+  return (
+    <div className="w-full h-60 md:h-96">
+      <StackedBarChart data={stackData2} />
+    </div>
+  );
+}
+```
+![Demo](https://raw.githubusercontent.com/Petrando/chartformers/master/media/StackedBarChart.gif)
+
+For full explanations on the options and properties, with live demo:
+## Visit the [chartformers documentation](https://chartformers-docs.vercel.app/).  
+
+
+Or you can grab the source code at:
+## the [github repo](https://github.com/Petrando/chartformers)

package/dist/chartformers.css

@@ -0,0 +1 @@
+._tooltip_4lu3m_3{max-width:18rem;background-color:#141414eb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:.75rem .85rem;border-radius:.5rem;box-shadow:0 4px 12px #0006;pointer-events:none;color:#f0f0f0;line-height:1.35;position:fixed}._tooltip_4lu3m_3:before,._tooltip_4lu3m_3:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:0;height:0;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}._tooltip--arrow-up_4lu3m_73:before{bottom:100%;margin-bottom:-1px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid rgba(20,20,20,.92)}._tooltip--arrow-down_4lu3m_101:after{top:100%;margin-top:-1px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid rgba(20,20,20,.92)}@media(min-width:768px){._tooltip_4lu3m_3{background-color:#141414d9}._tooltip--arrow-up_4lu3m_73:before{border-bottom-color:#141414d9}._tooltip--arrow-down_4lu3m_101:after{border-top-color:#141414d9}}@media(min-width:1024px){._tooltip_4lu3m_3{background-color:#141414bf}._tooltip--arrow-up_4lu3m_73:before{border-bottom-color:#141414bf}._tooltip--arrow-down_4lu3m_101:after{border-top-color:#141414bf}}._tooltip_4lu3m_3 ._title_4lu3m_167{font-weight:600;text-align:center;font-size:.9rem;margin-bottom:.25rem;color:#fff}@media(min-width:768px){._tooltip_4lu3m_3 ._title_4lu3m_167{font-weight:700;font-size:1rem}}text-small{font-size:.75rem;font-weight:600;margin:.15rem 0;color:#e5e5e5}@media(min-width:768px){._text-small_4lu3m_213{font-size:.875rem}}._right-label_4lu3m_225{font-size:.75rem;font-weight:600;text-align:right;margin:.15rem 0;color:#e7e7e7}@media(min-width:768px){._right-label_4lu3m_225{font-size:.875rem}}._controls-container_18scr_1{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:.5rem 1rem 0;background:#fffc;border-bottom:1px solid #ddd;z-index:10;overflow:hidden}._fill-container_18scr_25{flex:1;width:100%;height:100%;overflow:hidden;overflow-y:visible}._controls-label_18scr_41{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-size:.9rem;font-weight:500;color:#333;height:50px;padding-top:0}._disabled_18scr_67{opacity:.5;pointer-events:none}._controls-checkbox_18scr_75{width:16px;height:16px;cursor:pointer;accent-color:#007bff}._chart-svg_18scr_89{position:relative;display:block}._rotatedAxisText_f02qn_1{text-anchor:start;transform:rotate(25deg)}._axisText_f02qn_11{text-anchor:middle;transform:rotate(0)}._legend_7ftsg_1,._legend-active_7ftsg_1{display:flex;align-items:center;min-width:14px;height:16px;gap:8px;position:absolute;cursor:pointer}._legend-rect_7ftsg_21{width:14px;height:14px;border-radius:4px;flex-shrink:0}._legend-label_7ftsg_35{white-space:nowrap}@media screen and (max-width:480px){._legend_7ftsg_1,._legend-active_7ftsg_1{font-size:12px;height:14px;gap:6px}._legend-rect_7ftsg_21{width:12px;height:12px;border-radius:3px}}._legend-active_7ftsg_1 ._legend-rect_7ftsg_21{border:1.5px solid #3b82f6}._pieSlice_7ftsg_77{stroke:#f0f8ff;stroke-width:.25}._pieSliceNotHovered_7ftsg_87{stroke:#f0f8ff;stroke-width:2;animation-name:_animateNotHovered_7ftsg_1;animation-duration:.5s;animation-fill-mode:forwards}@keyframes _animateNotHovered_7ftsg_1{0%{opacity:1}to{opacity:.55}}._pieSliceExit_7ftsg_111{stroke:#f0f8ff;stroke-width:.25;pointer-events:none;animation-name:_animateHide_7ftsg_1;animation-duration:1s;animation-fill-mode:forwards}._pieLabelEnter_7ftsg_129{font:14px Helvetica Neue,Helvetica,Arial,sans-serif;text-anchor:middle;text-shadow:0 1px 0 rgb(238,244,238),1px 0 0 rgb(238,244,238),-1px 0 0 rgb(238,244,238),0 -1px 0 rgb(238,244,238);pointer-events:none;opacity:0;animation-name:_showText_7ftsg_1;animation-duration:1s;animation-delay:1s;animation-fill-mode:forwards}._pieLabelUnhover_7ftsg_153{font:14px Helvetica Neue,Helvetica,Arial,sans-serif;text-anchor:middle;text-shadow:0 1px 0 rgb(238,244,238),1px 0 0 rgb(238,244,238),-1px 0 0 rgb(238,244,238),0 -1px 0 rgb(238,244,238);pointer-events:none;animation-name:_showText_7ftsg_1;animation-duration:1s;animation-fill-mode:forwards}@keyframes _showText_7ftsg_1{0%{opacity:0}to{opacity:1}}._pieLabelUpdate_7ftsg_183{font:14px Helvetica Neue,Helvetica,Arial,sans-serif;text-anchor:middle;text-shadow:0 1px 0 rgb(238,244,238),1px 0 0 rgb(238,244,238),-1px 0 0 rgb(238,244,238),0 -1px 0 rgb(238,244,238);pointer-events:none}._pieLabelExit_7ftsg_197{font:14px Helvetica Neue,Helvetica,Arial,sans-serif;text-anchor:middle;text-shadow:0 1px 0 rgb(238,244,238),1px 0 0 rgb(238,244,238),-1px 0 0 rgb(238,244,238),0 -1px 0 rgb(238,244,238);pointer-events:none;animation-name:_animateHide_7ftsg_1;animation-duration:.25s;animation-fill-mode:forwards}@keyframes _animateHide_7ftsg_1{0%{opacity:1}to{opacity:0}}._legends-container_brzcg_1{display:flex;flex-direction:row;align-items:center;gap:6px;position:relative;width:100%;overflow-y:hidden;overflow-x:auto;padding:0 8px;height:53px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}._legends-container_brzcg_1::-webkit-scrollbar{height:6px}._legends-container_brzcg_1::-webkit-scrollbar-track{background:transparent}._legends-container_brzcg_1::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}._legend-container_brzcg_61,._legend-container-active_brzcg_61,._legend-container-inactive_brzcg_61{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;border:"1px solid #ccc";width:80px;height:53px;text-align:center;position:absolute}._legend-container_brzcg_61,._legend-container-inactive_brzcg_61{padding-top:3px}._legend-container-active_brzcg_61{padding-top:1px}._legend-rect_brzcg_105{border-radius:4px;width:16px;height:16px;border:1px solid #ccc;transition:all .2s ease-in-out}._legend-label_brzcg_121{font-size:12px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center;transition:all .2s ease-in-out}@media(min-width:768px){._legend-label_brzcg_121{white-space:normal;word-break:break-word;font-size:.85rem}}._legend-container_brzcg_61:hover ._legend-label_brzcg_121{font-weight:600}._legend-container_brzcg_61:hover ._legend-rect_brzcg_105{width:18px;height:18px;border:1px solid #007bff}._legend-container-active_brzcg_61 ._legend-rect_brzcg_105{border:2px solid #007bff;width:18px;height:18px}._legend-container-active_brzcg_61 ._legend-label_brzcg_121{font-weight:700}._rect_brzcg_201,._rectCard_brzcg_201{stroke-width:1;stroke:#0d9488}._rect_brzcg_201{stroke-width:1.5}._rectLegendNotHovered_brzcg_221{stroke-width:0}._legend_brzcg_1,._rectCard_brzcg_201{transition:stroke-width;transition-duration:.25s}._rect_brzcg_201:hover{stroke-width:1.5}._rectCard_brzcg_201:hover,._legend_brzcg_1:hover{stroke-width:1}._rect_brzcg_201:hover,._rectCard_brzcg_201:hover,._legend_brzcg_1:hover,._rectHoveredLegend_brzcg_257{stroke:#3f3f46;stroke-dasharray:none}._rectCardLegendHovered_brzcg_267{stroke:#0d9488;stroke-width:1;stroke-dasharray:none}._rectLegendHovered_brzcg_279{stroke:#0d9488;stroke-width:2;stroke-dasharray:none}._rectLegendNotHovered_brzcg_221{stroke:transparent;stroke-width:2}._rotatedAxisText_brzcg_301{text-anchor:start;transform:rotate(25deg)}._axisText_brzcg_311{text-anchor:middle;transform:rotate(0)}._hoveredAxisText_brzcg_321{font-weight:700}._yAxisLabel_brzcg_335{font: 14px Roboto;fill:#0891b2}