pablomolnar/radial-progress-chart

[Not Actively Maintained] Radial Progress Chart started as a weekend project. It’s written on the top of D3.js and was heavily inspired by Apple Watch Activity and D3 stub of Polar Clock.

radial-progress-chart's Issues

Unable to use multiple charts with differing gradients on same page

When using multiple instances of the radial-progress-chart each with a unique linear-gradients all instances use the last defined linear-gradient.

I've tracked the issue down to where the gradients are added to the svg:defs. All instances use the same name/id. I've modified this myself locally on lines 72 and 262. I've had to move the fill from the progress function (line 262) to line 146 due to issue with the animation. See code below.

Line 72 - Gradient definition, new variable to define unique instance.

    var gradientId = "gradient" + Math.random();
    series.forEach(function (item) {
        if (item.color.linearGradient || item.color.radialGradient) {
            var gradient = RadialProgressChart.Gradient.toSVGElement(gradientId + item.index, item.color);
            defs.node().appendChild(gradient);
        }
    });

Line 146 - Gradient added to svg path

    self.field.append("path").attr("class", "progress").attr("filter", "url(#" + dropshadowId + ")")
    .attr("class", "progress")
      .style("fill", function (item) {
          if (item.color.solid) {
              return item.color.solid;
          }

          if (item.color.linearGradient || item.color.radialGradient) {
              return "url(#" + gradientId + item.index + ")"
          }
      });

If you'd rather I can make a pull req.

Bad Performance when using up to 5 rings

Is anyone else having issues with horrible performance when rendering multiple charts at the same time? I have a list of 14 charts with 5 rings and it's loading like the GIF shows?

Doesn't seem right? I'm also using it inside a React app. See code.

// @flow

import React from 'react';
import RadialProgressChart from 'radial-progress-chart';

type Series = {
  labelStart: string,
  value: number
};

const keyAreaShortCuts: [string, string, string, string, string] = [
  'D',
  'M',
  'C',
  'Ti',
  'Ta'
];
const initialChartData: Array<Series> = keyAreaShortCuts.map(ka => ({
  labelStart: ka,
  value: Math.round(Math.random() * 60) + 20,
  color: {
    linearGradient: {
      x1: '0%',
      y1: '100%',
      x2: '50%',
      y2: '0%',
      spreadMethod: 'pad'
    },
    stops: [
      {
        offset: '0%',
        'stop-color': '#fe08b5',
        'stop-opacity': 1
      },
      {
        offset: '100%',
        'stop-color': '#ff1410',
        'stop-opacity': 1
      }
    ]
  }
}));

type Props = {
  teamId: number
};

function RingChart(props: Props): React$Node {
  const chartRef = React.useRef(null);
  const chartClass: string = `activityChart-${props.teamId}`;

  React.useLayoutEffect(() => {
    chartRef.current = new RadialProgressChart(`.${chartClass}`, {
      series: initialChartData
    });
  }, [chartClass]);

  return <div className={chartClass} />;
}

RingChart.defaultProps = {
  teamId: 0
};

export default React.memo(RingChart);

Background elements are rendered in-front of foreground elements

In SVG, the element ordering determines the rendering order. Around line 150 of dist/radial-progress-chart.js the "bg" element is added after the "progress" (or foreground) element, but it is given opacity: 0.2 to compensate. However, this changes the color of the foreground element.

The fix is simple. Move the self.field.append("path").attr("class", "bg") line to be before the self.field.append("path").attr("class", "progress") line and remove .style("opacity", 0.2)

Can we add tool-tip on radial?

Can we add tool-tip on radial?

Calling update(0) does nothing

Which is expected behaviour perhaps, according to the code

if (data) { if (typeof data === 'number') { data = [data]; }

but this means you can never change the chart to have 0 as its value unless it was initialized as such.

SVG Scaling issue in Internet Explorer

SVG scaling does not work within IE 11.

A work around I managed to get working is to add the 'width' attribute within the SVG dom element, to 100%.

// create svg self.svg = d3.select(query).append("svg") .attr("preserveAspectRatio","xMinYMin meet") .attr("viewBox", dim) **.attr("width", '100%')** .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Support for D3 v4.4.0

Getting the following error with D3 4.4.0. Also the round option doesn't seem to work, I always get round corners to my circles instead of square ones.

TypeError: Cannot read property 'arc' of undefined
    at new i (http://localhost:8080/bower_components/radial-progress-chart/dist/radial-progress-chart.min.js:1:1526)
    at HTMLDivElement.eval (eval at globalEval (http://localhost:8080/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:29:5)
    at Function.each (http://localhost:8080/bower_components/jquery/dist/jquery.js:365:19)
    at jQuery.fn.init.each (http://localhost:8080/bower_components/jquery/dist/jquery.js:137:17)
    at eval (eval at globalEval (http://localhost:8080/bower_components/jquery/dist/jquery.js:343:5), <anonymous>:2:29)
    at eval (<anonymous>)
    at Function.globalEval (http://localhost:8080/bower_components/jquery/dist/jquery.js:343:5)
    at domManip (http://localhost:8080/bower_components/jquery/dist/jquery.js:5291:15)
    at jQuery.fn.init.append (http://localhost:8080/bower_components/jquery/dist/jquery.js:5431:10)
    at jQuery.fn.init.<anonymous> (http://localhost:8080/bower_components/jquery/dist/jquery.js:5525:18)

Shadow in small charts with background-color white

Hi,
I found your chart very good but have an issue when the container has white background. As you can check in your webpage changing the background color on week activity demo, we can see a lot of shadow. That doesn't seems to bother in big charts, but in small ones is annoying. Do you know how can I fix? Maybe in the configuration would be possible to set the shadow width?

Thanks,
Felipe.

Multi-series centre callback only contains current value

I have a multi-line center text and want to have values from 3 series shown in the centre.

Unfortunately only the last updated series value can be shown. Whilst the center callback is called for each series there's no way to find the current value of each series. Attempting to check the index and only return a string when index is 0 for example results in a blank string being returned.

Is it possible to extend the item parameter on the center callback to contain the current value for all series?

            center: {
                content: [function (value, index, item) {
                    return value + '%'
                },
                function (value, index, item) {
                    return value + ' SLEEP EFFICIENCY'
                }],
                y: 25
            }

Anti-Aliasing of chart fill with shadow width:0

Love the new shadow width option. I'm using the radial progress chart on a flat style interface and wanting to keep effects to a minimum. When using a shadow width of 0 there seems to be no aliasing applied to the chart series and jaggies are appearing at the top/bottom of the chart.

See attached pic (use full res). I'm using Chrome 48.0.2564.97 on Win 10. Any thoughts?

Keep getting errors when trying to destroy

How to change start position of each series?

For example, I need to start some progress from 20%, not only from 0. If I've multiple series I need to setup this start point for each. Can I do this?

Setting Shadow Width to Zero Breaks Filter in Firefox

See: http://codepen.io/anon/pen/zoopzB

This filter on line 147 should probably only be set if self.options.shadow.width > 0:

self.field.append("path").attr("class", "progress").attr("filter", "url(#" + dropshadowId +")");