@impetusuxp/vizualy-radial-chart

Radial Chart

Installation

Use the package manager NPM to install Radial Chart.

npm install @impetusuxp/vizualy-radial-chart

Sample Data (Chart's required data format)

const data = [
    {
        "name": "Jan",
        "value": 40
    },
    {
        "name": "Feb",
        "value": 20
    },
    {
        "name": "Mar",
        "value": 25
    },
    {
        "name": "Apr",
        "value": 10
    },
    {
        "name": "May",
        "value": 60
    },
    {
        "name": "June",
        "value": 75
    },
    {
        "name": "July",
        "value": 30
    },
    {
        "name": "August",
        "value": 30
    }
];

Usage

import RadialChart from '@impetusuxp/vizualy-radial-chart';

const radialChart = new RadialChart();

// Draw chart
radialChart
      .container('containerID')
      .value('value key in data') // Referred as "value" in sample data
      .label('label key in data') // Referred as "name" in sample data
      .data(data object) // Referred to sample data
      .settings(chart configuration object)
      .draw();

// Update chart
radialChart.data(updated data object).update();

<script type="text/javascript" src="./libs/d3.v6.min.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/utility.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/assistant.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/observer.js"></script>
<script type="text/javascript" src="./vizualy-radial-chart/vizualy-radial-chart.js"></script>
<script>
const radialchart = new vizualy.RadialChart();

// Draw chart
radialchart
      .container('containerID')
      .value('value key in data') // Referred as "value" in sample data
      .label('label key in data') // Referred as "name" in sample data
      .data(data object) // Referred to sample data
      .settings(chart configuration object)
      .draw();

// Update chart
radialchart.data(updated data object).update();
</script>

Make sure to use/import vizualy-assistant/src/css/common.css in your code-base as per recommended by frontend framework being used

Configurations/Settings

dimension: {
    width: 500,
    height: 500,
    margin: { top: 20, right: 20, bottom: 40, left: 40 }
}

Key	Type	Default	Description
width	Number in px	Default width of container	To provide custom width to chart.
height	Number in px	Default height of container	To provide custom height to chart.
margin	Object	{ top: 20, right: 20, bottom: 40, left: 40 }	To provide margin to chart.

radialScaleType: {
    type: "linear"
}

Key	Type	Default	Description
type	String	'linear'	To provide scale type for radial

arcAngle: {
     baseRadial: {
        startAngle: 0,
        endAngle: 2
    }
}

Key	Type	Default	Description
baseRadial	Object	baseRadial: { startAngle: 0, endAngle: 2 }	To customize start and end angle for base radial.

targetValue: 100

Key	Type	Default	Description
targetValue	Number	Default target value for radial	To define the target value for radial.

arcMinRadius: 200

Key	Type	Default	Description
arcMinRadius	Number	Default minimum value for inner radius in radial	To adjust the inner radius in radial chart

label: {
    isVisible: true,
    xTranslateLabel: 0,
    yTranslateLabel: -20,
    xTranslateValueLabel: 0,
    yTranslateValueLabel: 10,
    dataKey: null,
    isTargetValueVisible: false,
    textLabelFormat: (d) => d,
    textValueFormat: (d) => d
}

Key	Type	Default	Description
isVisible	Boolean	True	To show/hide label.
xTranslateLabel	Number	0	To adjust X position of label.
yTranslateLabel	Number	-20	To adjust Y position of label.
xTranslateValueLabel	Number	0	To adjust X position of value label.
yTranslateValueLabel	Number	10	To adjust Y position of value label.
dataKey	String	null	Property key in data as label text.
isTargetValueVisible	Boolean	false	To show/hide target value.
textLabelFormat	Function	Default label	To customize labels of radial.
textValueFormat	Function	Default value	To customize value labels of radial.

tooltip: {
    isVisible: true,
    content: (d, chartObject) => "Some html",
    placement: "top-right"
}

Key	Type	Default	Description
isVisible	Boolean	True	To keep the tooltip in active/hidden state
content	Function	Radial chart specific HTML	To provide custom tooltip content
placement	String(top-right, top-left, bottom-right, bottom-left, auto)	'top-right'	To provide static direction to tooltip wrapper.

animation: {
    isApplied: true,
    duration: 750,
    type: 'cubic'
}

Key	Type	Default	Description
isApplied	Boolean	True	To activate/deactivate animations
duration	Number(in ms)	750	duration of animation
type	String("elastic", "bounce", "linear", "sin", "quad", "cubic", "poly", "circle", "exp", "back")	'cubic'	type of animation.

isResponsive: true

Key	Type	Default	Description
isResponsive	Boolean	True	To activate/deactivate responsive behavior of chart.

emptyDataMessage: 'No Data Available'

Key	Type	Default	Description
emptyDataMessage	String	'No Data Available'	To customize message to be displayed on screen when data is empty.

exceptionMessage: 'Something went wrong!! Please see logs.'

Key	Type	Default	Description
exceptionMessage	String	'Something went wrong!! Please see logs.'	To customize message to be displayed on screen when any error occurs.

legend: {
    isVisible: true,
    placement: 'right',
    margin: { top: 10, right: 10, bottom: 10, left: 10 },
    rectWidth: 10,
    rectHeight: 10,
    textKey: null,
    textFormat: (d) => d,
}

Key	Type	Default	Description
isVisible	Boolean	True	To keep the legend in active/hidden state.
placement	String("right", "center", "left")	'right'	Placement(direction) at the top of charts.
margin	Object	{ top: 10, right: 10, bottom: 10, left: 10 }	To provide margin to legends.
rectWidth	number	10	Width of legend rectangle.
rectHeight	number	10	Height of legend rectangle.
textKey	String	null	Property key in data as legend text.
textFormat	Function	Default text	To customize legend text available via argument(d).

Chart's life cycle hooks:-

chartObject.on('beforeDraw', () => { // do something })
chartObject.on('completeDraw', () => { // do something })
chartObject.on('beforeUpdate', () => { // do something })
chartObject.on('completeUpdate, () => { // do something })
chartObject.on('beforeResize', () => { // do something })
chartObject.on('completeResize', () => { // do something })

Key	Type	Default	Description
on	Function('eventId', handler)	No action	To perform custom actions on mentioned events.

Event subscription

radialchart.getElement("radial-bar").on('mouseMove', [(d, element, event) => { }], removePreviousHandlers: boolean);

We can attaché multiple handlers(Array of functions) on events(mouseMove) to exposed element(radial-bar). We have below events to subscribe -> mouseMove, mouseEnter, mouseOut, mouseOver

Contriubutor

Impetus Technologies

License

MIT