react-gauge-component - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

dist/GaugeComponent/hooks/arc.d.ts

 import { Gauge } from '../types/Gauge';
 export declare const setArcData: (gauge: Gauge) => void;
 export declare const setupArcs: (gauge: Gauge) => void;
+export declare const applyColors: (subArcsPath: any, gauge: Gauge) => void;
+export declare const applyGradientColors: (gradEl: any, gauge: Gauge) => void;
 export declare const getColors: (gauge: Gauge) => string[] | number[];
+export declare const createGradientElement: (div: any, uniqueId: string) => any;
 export declare const clearArcs: (gauge: Gauge) => any;

dist/GaugeComponent/hooks/arc.js

@@ -29,3 +29,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearArcs = exports.getColors = exports.setupArcs = exports.setArcData = void 0;
+exports.clearArcs = exports.createGradientElement = exports.getColors = exports.applyGradientColors = exports.applyColors = exports.setupArcs = exports.setArcData = void 0;
 var utils = __importStar(require("./utils"));
@@ -131,3 +131,3 @@ var d3_1 = require("d3");
 var setupArcs = function (gauge) {
-    var arc = gauge.props.arc;
+    var _a = gauge.props, arc = _a.arc, maxValue = _a.maxValue;
     //Add tooltip
@@ -144,12 +144,19 @@ var isTooltipInTheDom = document.getElementsByClassName(constants_1.default.arcTooltipClassname).length != 0;
     chartHooks.clearChart(gauge);
+    var data = {};
+    //When gradient enabled, it'll have only 1 arc
+    if (gauge.props.arc.gradient) {
+        data = [{ value: 1 }];
+    }
+    else {
+        data = gauge.arcData.current;
+    }
     var arcPaths = gauge.doughnut.current
         .selectAll(".arc")
-        .data(gauge.pieChart.current(gauge.arcData.current))
+        .data(gauge.pieChart.current(data))
         .enter()
         .append("g");
-    arcPaths
+    var subArcs = arcPaths
         .append("path")
-        .attr("d", gauge.arcChart.current)
-        // .style("fill", (d) => `linear-gradient(to right, red 0%, green 100%)`);
-        .style("fill", function (d) { return d.data.color; });
+        .attr("d", gauge.arcChart.current);
+    (0, exports.applyColors)(subArcs, gauge);
     arcPaths
@@ -160,2 +167,24 @@ .on("mouseout", onArcMouseOut)
 exports.setupArcs = setupArcs;
+var applyColors = function (subArcsPath, gauge) {
+    if (gauge.props.arc.gradient) {
+        var uniqueId_1 = "subArc-linear-gradient-".concat(Math.random());
+        var gradEl = (0, exports.createGradientElement)(gauge.doughnut.current, uniqueId_1);
+        (0, exports.applyGradientColors)(gradEl, gauge);
+        subArcsPath.style("fill", function (d) { return "url(#".concat(uniqueId_1, ")"); });
+    }
+    else {
+        subArcsPath.style("fill", function (d) { return d.data.color; });
+    }
+};
+exports.applyColors = applyColors;
+var applyGradientColors = function (gradEl, gauge) {
+    var arc = gauge.props.arc;
+    arc.subArcs.forEach(function (subArc) {
+        return gradEl.append("stop")
+            .attr("offset", "".concat(subArc.limit, "%"))
+            .style("stop-color", subArc.color) //end in red
+            .style("stop-opacity", 1);
+    });
+};
+exports.applyGradientColors = applyGradientColors;
 //Depending on the number of levels in the chart
@@ -192,3 +221,15 @@ //This function returns the same number of colors
 exports.getColors = getColors;
+var createGradientElement = function (div, uniqueId) {
+    //make defs and add the linear gradient
+    var lg = div.append("defs").append("linearGradient")
+        .attr("id", uniqueId) //id of the gradient
+        .attr("x1", "0%")
+        .attr("x2", "100%")
+        .attr("y1", "0%")
+        .attr("y2", "0%") //since its a vertical linear gradient 
+    ;
+    return lg;
+};
+exports.createGradientElement = createGradientElement;
 var clearArcs = function (gauge) { return gauge.doughnut.current.selectAll("g").remove(); };
 exports.clearArcs = clearArcs;

dist/GaugeComponent/hooks/arc.ts

@@ -16,3 +16,3 @@ import * as utils from './utils';
   div.style("display", "none");
-  if(d.data.tooltip != undefined){
+  if (d.data.tooltip != undefined) {
     div.html(d.data.tooltip.text)
@@ -33,3 +33,3 @@ .style("left", (event.pageX + 15) + "px")
   //Apply custom styles
-  if(tooltip.style != undefined) Object.entries(tooltip.style).forEach(([key, value]) => div.style(utils.camelCaseToKebabCase(key), value))
+  if (tooltip.style != undefined) Object.entries(tooltip.style).forEach(([key, value]) => div.style(utils.camelCaseToKebabCase(key), value))
 }
@@ -75,3 +75,3 @@ const onArcMouseOut = () => { select(`.${CONSTANTS.arcTooltipClassname}`).html(" ").style("display", "none"); }
       lastSubArcLimit = subArc.limit;
-      if(subArc.tooltip != undefined) subArcsTooltip.push(subArc.tooltip);
+      if (subArc.tooltip != undefined) subArcsTooltip.push(subArc.tooltip);
     });
@@ -103,3 +103,3 @@ gauge.arcData.current = subArcsLength.map((length, i) => ({
 export const setupArcs = (gauge: Gauge) => {
-  const { arc } = gauge.props;
+  const { arc, maxValue } = gauge.props;
   //Add tooltip
@@ -117,19 +117,45 @@ let isTooltipInTheDom = document.getElementsByClassName(CONSTANTS.arcTooltipClassname).length != 0;
   chartHooks.clearChart(gauge);
-
+  let data = {}
+  //When gradient enabled, it'll have only 1 arc
+  if(gauge.props.arc.gradient){
+    data = [{value: 1}];
+  } else {
+    data = gauge.arcData.current
+  }
   var arcPaths = gauge.doughnut.current
     .selectAll(".arc")
-    .data(gauge.pieChart.current(gauge.arcData.current))
+    .data(gauge.pieChart.current(data))
     .enter()
     .append("g");
-
-  arcPaths
+  let subArcs = arcPaths
     .append("path")
     .attr("d", gauge.arcChart.current)
-    // .style("fill", (d) => `linear-gradient(to right, red 0%, green 100%)`);
-    .style("fill", (d: any) => d.data.color);
+  applyColors(subArcs, gauge);
 
   arcPaths
     .on("mouseout", onArcMouseOut)
-    .on("mousemove", (event:any, d:any) => onArcMouseMove(event, d))
+    .on("mousemove", (event: any, d: any) => onArcMouseMove(event, d))
 };
+
+export const applyColors = (subArcsPath: any, gauge: Gauge) => {
+  if(gauge.props.arc.gradient){
+    let uniqueId = `subArc-linear-gradient-${Math.random()}`
+    let gradEl = createGradientElement(gauge.doughnut.current, uniqueId);
+    applyGradientColors(gradEl, gauge)
+    subArcsPath.style("fill", (d: any) => `url(#${uniqueId})`);
+  }else{
+    subArcsPath.style("fill", (d: any) => d.data.color);
+  }
+
+}
+export const applyGradientColors = (gradEl: any, gauge: Gauge) => {
+  const { arc } = gauge.props;
+  arc.subArcs.forEach((subArc) => 
+    gradEl.append("stop")
+        .attr("offset", `${subArc.limit}%`)
+        .style("stop-color", subArc.color)//end in red
+        .style("stop-opacity", 1)
+  )
+}
+
 //Depending on the number of levels in the chart
@@ -162,3 +188,13 @@ //This function returns the same number of colors
 };
-
+export const createGradientElement = (div: any, uniqueId: string) => {
+  //make defs and add the linear gradient
+  var lg = div.append("defs").append("linearGradient")
+    .attr("id", uniqueId)//id of the gradient
+    .attr("x1", "0%")
+    .attr("x2", "100%")
+    .attr("y1", "0%")
+    .attr("y2", "0%")//since its a vertical linear gradient 
+    ;
+  return lg
+}
 export const clearArcs = (gauge: Gauge) => gauge.doughnut.current.selectAll("g").remove();

dist/GaugeComponent/types/Arc.d.ts

@@ -7,2 +7,3 @@ import { Tooltip } from './Tooltip';
     nbSubArcs?: number;
+    gradient: boolean;
     colorArray?: Array<string>;
@@ -9,0 +10,0 @@ subArcs: Array<SubArc>;

dist/GaugeComponent/types/Arc.js

@@ -16,2 +16,3 @@ "use strict";
     subArcs: exports.defaultSubArcs,
+    gradient: false
 };

dist/GaugeComponent/types/Arc.ts

@@ -7,2 +7,3 @@ import { Tooltip } from './Tooltip';
     nbSubArcs?: number, //The number of subArcs, this overrides "subArcs" limits
+    gradient: boolean,
     colorArray?: Array<string>, //The colors of the arcs, this overrides "subArcs" colors
@@ -31,2 +32,3 @@ subArcs: Array<SubArc>
     subArcs: defaultSubArcs,
+    gradient: false
 };

dist/GaugeComponent/types/GaugeComponentProps.js

@@ -8,4 +8,4 @@ "use strict";
 exports.defaultGaugeProps = {
-    id: "gauge",
-    className: "gauge",
+    id: "gauge-component-id",
+    className: "gauge-component-class",
     style: { width: "100%" },
@@ -12,0 +12,0 @@ marginInPercent: 0.05,

dist/GaugeComponent/types/GaugeComponentProps.ts

@@ -20,4 +20,4 @@ import { Arc, defaultArc } from "./Arc";
 export const defaultGaugeProps: GaugeComponentProps = {
-    id: "gauge",
-    className: "gauge",
+    id: "gauge-component-id",
+    className: "gauge-component-class",
     style: { width: "100%"},
@@ -24,0 +24,0 @@ marginInPercent: 0.05,

package.json

 {
   "name": "react-gauge-component",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

README.md

@@ -12,2 +12,3 @@ # react-gauge-component
   <li>Added further customizations of the needle like animation and width</li>
+  <li>Added arc with linear gradient colors</li>
   <li>Refactored project structure to separated files</li>
@@ -195,7 +196,7 @@ <li>Refactored to Typescript</li>
 <ul>
-   <li><code>id: string</code>: A unique identifier for the div surrounding the chart. Default:<code>undefined</code>.</li>
-   <li><code>className: string</code>: Adds a <code>className</code> to the div container. Default:<code>undefined</code>.</li>
+   <li><code>id: string</code>: A unique identifier for the div surrounding the chart. Default:<code>"gauge-component-id"</code>.</li>
+   <li><code>className: string</code>: Adds a <code>className</code> to the div container. Default:<code>"gauge-component-class"</code>.</li>
    <li><code>style: React.CSSProperties</code>: Adds a style object to the div container. Default: <code>{width: 100}</code>.</li>
    <li><code>marginInPercent: number</code>: Sets the margin for the chart inside the containing SVG element. Default: <code>0.05</code>.</li>
-   <li><code>value: number</code>: The value of the gauge. Default: <code>0</code>.</li>
+   <li><code>value: number</code>: The value of the gauge. Default: <code>33</code>.</li>
    <li><code>minValue: number</code>: The minimum value of the gauge. Default: <code>0</code>.</li>
@@ -207,5 +208,6 @@ <li><code>maxValue: number</code>: The maximum value of the gauge. Default: <code>100</code>.</li>
       <li><code>padding: number</code>: The padding between subArcs, in rad. Default: <code>0.05</code>.</li>
-      <li><code>width: number</code>: The width of the arc given in percent of the radius. Default: <code>0.2</code>.</li>
+      <li><code>width: number</code>: The width of the arc given in percent of the radius. Default: <code>0.15</code>.</li>
       <li><code>nbSubArcs: number</code>: The number of subArcs. This overrides <code>subArcs</code>. Default: <code>undefined</code></li>
       <li><code>colorArray: Array&lt;string&gt;</code>: The colors of the arcs. This overrides <code>subArcs</code> colors. Default: <code>undefined</code></li>
+      <li><code>gradient: boolean</code>: This will draw a single chart with all colors provided in subArcs, using limits as references to draw the linear-gradient result. Default: <code>false</code>.</li>
       <li><code>subArcs: Array&lt;object&gt;</code>: The subArcs of the gauge.
@@ -212,0 +214,0 @@ <ul>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114482

increased by3.09%

Lines of code

2333

increased by3.73%

Number of lines in readme file

289

increased by0.7%

No dependency changes