New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

chartjs-plugin-dragdata

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

chartjs-plugin-dragdata - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

.babelrc

0

.eslintrc.js

@@ -0,0 +0,0 @@ module.exports = {

19

package.json
{
"name": "chartjs-plugin-dragdata",
"version": "0.3.1",
"version": "0.4.0",
"description": "Draggable data points for Chart.js",
"main": "dist/chartjs-plugin-dragData.js",
"scripts": {
"compile": "webpack"
"build": "webpack"
},

@@ -23,11 +23,12 @@ "repository": {

"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"webpack": "^1.13.2",
"webpack-node-externals": "^1.5.4"
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/node": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/register": "^7.5.5",
"babel-loader": "^8.0.6",
"webpack": "^4.36.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"babel-preset-env": "^1.7.0",
"chart.js": "^2.4.0",

@@ -34,0 +35,0 @@ "d3-drag": "^1.0.1",

@@ -7,5 +7,6 @@ # chartjs-plugin-dragData.js

![Drag Data Animation](https://chrispahm.github.io/chartjs-plugin-dragData/assets/chartjs-plugin-dragData.gif)
![Drag Data Animation](https://user-images.githubusercontent.com/20703207/61458811-ab2da180-a96b-11e9-90ae-7fc3dbec444e.gif)
[Online demo single Y-Axis](https://chrispahm.github.io/chartjs-plugin-dragData/), [dual Y-Axis](https://chrispahm.github.io/chartjs-plugin-dragData/dualAxis.html),[small chart](https://chrispahm.github.io/chartjs-plugin-dragData/smallChart.html),[bubble chart](https://chrispahm.github.io/chartjs-plugin-dragData/bubble.html),[radar chart](https://chrispahm.github.io/chartjs-plugin-dragData/radar.html)
Online demos:
[Single Y-Axis](https://chrispahm.github.io/chartjs-plugin-dragData/), [Dual Y-Axis](https://chrispahm.github.io/chartjs-plugin-dragData/dualAxis.html),[Small Chart](https://chrispahm.github.io/chartjs-plugin-dragData/smallChart.html),[Bubble Chart](https://chrispahm.github.io/chartjs-plugin-dragData/bubble.html),[Radar Chart](https://chrispahm.github.io/chartjs-plugin-dragData/radar.html),[Bar Chart](https://chrispahm.github.io/chartjs-plugin-dragData/bar.html),[Horizontal Bar Chart](https://chrispahm.github.io/chartjs-plugin-dragData/horizontalBar.html),[Stacked Bar Chart](https://chrispahm.github.io/chartjs-plugin-dragData/stackedBar.html), [Stacked Horizontal Bar Chart](https://chrispahm.github.io/chartjs-plugin-dragData/stackedHorizontalBar.html),[React Fiddle](https://jsfiddle.net/rts082hj/)

@@ -17,3 +18,3 @@ ## Installation

```
npm install chartjs-plugin-dragdata --save
npm install chartjs-plugin-dragdata
```

@@ -24,3 +25,3 @@

```
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@0.3.0/dist/chartjs-plugin-dragData.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@0.4.0/dist/chartjs-plugin-dragData.min.js"></script>
```

@@ -32,3 +33,3 @@

To make (line, bubble and radar chart) data points draggable, simply add ```dragData: true``` to the config section of the chart instance. If you (additionally to the y-axis) would like to drag data along the x-axis, you may also add ```dragX: true```.
To make (line, bubble, bar and radar chart) data points draggable, simply add ```dragData: true``` to the config section of the chart instance. If you (additionally to the y-axis) would like to drag data along the x-axis, you may also add ```dragX: true```.

@@ -43,26 +44,41 @@ To round the values dragged to, simply add ```dragDataRound: 0``` to the config section of the chart instance.

```javascript
{
...
dragData: true,
dragX: false,
dragDataRound: 0,
onDragStart: function (event, element) {},
onDrag: function (event, datasetIndex, index, value) {},
onDragEnd: function (event, datasetIndex, index, value) {}
const myChartOptions = {
type: 'line', // or radar, bar, horizontalBar, bubble
data: {...},
options: {
... // the rest of your chart options, e.g. axis configuration
dragData: true,
dragX: false,
dragDataRound: 0,
onDragStart: function (e, element) {
// where e = event
},
onDrag: function (e, datasetIndex, index, value) {
// where e = event
},
onDragEnd: function (e, datasetIndex, index, value) {
// where e = event
}
}
}
```
Minimum and maximum allowed data values can be specified through the `min` and `max` ticks settings in the scales options. By setting these values accordingly, unexptected (fast) changes to the scales, that may occur when dragging data points towards the outer boundaries of the y-axis, can be prohibited.
Minimum and maximum allowed data values can be specified through the `min` and `max` ticks settings in the scales options. By setting these values accordingly, unexpected (fast) changes to the scales, that may occur when dragging data points towards the outer boundaries of the y-axis, can be prohibited.
```javascript
options: {
scales: {
yAxes: [{
ticks: {
max: 25,
min: 0
}
}]
},
...
const myChartOptions = {
type: 'line', // or radar, bar, horizontalBar, bubble
data: {...},
options: {
dragData: true,
scales: {
yAxes: [{
ticks: {
max: 25,
min: 0
}
}]
},
... // the remainder of your chart options, e.g. dragData: true etc.
}
```

@@ -73,12 +89,20 @@

```javascript
const data = {
datasets: [
{
label: "Data Label",
fill: false,
data: dataPoints,
yAxisID: 'B',
dragData: false
}, {
...
const myChartOptions = {
type: 'line', // or radar, bar, horizontalBar, bubble
data: {
datasets: [
{
label: "Data Label",
fill: false,
data: dataPoints,
yAxisID: 'B',
dragData: false
}, {
...
},
options: {
dragData: true,
... // the remainder of your chart options
}
}
```

@@ -89,13 +113,18 @@

```javascript
options: {
scales: {
yAxes: [{
ticks: {
max: 25,
min: 0
},
dragData: false
}]
},
...
const myChartOptions = {
type: 'line', // or radar, bar, horizontalBar, bubble
data: {...},
options: {
dragData: true,
scales: {
yAxes: [{
ticks: {
max: 25,
min: 0
},
dragData: false
}]
},
... // the remainder of your chart options, e.g. dragData: true etc.
}
```

@@ -105,4 +134,7 @@

To disable the automatic update of the data, you can return `false` to function `onDrag`. Nothing will happen to the points without you changing the `data` attribute somewhere else. This is use full for frameworks like emberjs who us the data down action up paradigm.
To disable the automatic update of the data, you can return `false` to function `onDrag`. Nothing will happen to the points without you changing the `data` attribute somewhere else. This is useful for frameworks like emberjs who us the data down action up paradigm.
## Touch devices
In order to support touch events, the [`pointHitRadius`](https://www.chartjs.org/docs/latest/charts/line.html#point-styling) option should be set to a value greater than `25`. You can find working example configurations in the `docs/*.html` files. Also note, that mobile devices (and thus touch events) can be simulated with the [device mode in the Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/device-mode/).
## Gotchas

@@ -152,2 +184,4 @@ When working with a module bundler (e.g. Webpack) and a framework (e.g. Vue.js/React/Angular), you still need to import the plugin library after installing.

Please feel free to submit an issue or a pull request!
If you make changes to the src/index.js file, don't forget to `npm run build` and
manually test your changes against all demos in the docs folder.

@@ -154,0 +188,0 @@ ## License

@@ -5,3 +5,3 @@ import Chart from 'chart.js'

let element, scale, scaleX, radar
let element, scale, scaleX, type, stacked, initValue

@@ -13,16 +13,25 @@ function getElement (chartInstance, callback) {

element = chartInstance.getElementAtEvent(e)[0]
radar = chartInstance.config.type == 'radar'
let scaleName = radar ? '_scale' : '_yScale'
type = chartInstance.config.type
let scaleName = type === 'radar' ? '_scale' : '_yScale'
if (element) {
if (chartInstance.data.datasets[element['_datasetIndex']].dragData === false || element[scaleName].options.dragData === false) {
if (chartInstance.data.datasets[element._datasetIndex].dragData === false || element[scaleName].options.dragData === false) {
element = null
return
}
scale = element[scaleName].id
if (element['_xScale']) {
scaleX = element['_xScale'].id
if (element._xScale) {
scaleX = element._xScale.id
}
if (type === 'bar' || type === 'horizontalBar') {
stacked = chartInstance.config.options.scales.xAxes[0].stacked
let x,y
let datasetIndex = element._datasetIndex
let index = element._index
let newPos = calcPosition(e,chartInstance,datasetIndex,index,x,y)
let curValue = chartInstance.data.datasets[datasetIndex].data[index]
initValue = newPos - curValue
}
if (typeof callback === 'function' && element) {

@@ -38,73 +47,86 @@ if ( callback(e, element) === false) {

function updateData (chartInstance, callback) {
return () => {
if (element && event) {
const e = event.sourceEvent
const datasetIndex = element['_datasetIndex']
const index = element['_index']
function roundValue(value, pos) {
if (!isNaN(pos)) {
return Math.round(value * Math.pow(10, pos))/Math.pow(10, pos)
}
return value
}
const roundValue = function(value, pos) {
if (!isNaN(pos)) {
return Math.round(value * Math.pow(10, pos))/Math.pow(10, pos)
}
return value
}
function calcRadar(e,chartInstance) {
let x,y,v
if (e.touches) {
x = e.touches[0].clientX-chartInstance.canvas.getBoundingClientRect().left
y = e.touches[0].clientY-chartInstance.canvas.getBoundingClientRect().top
} else {
x = e.clientX - chartInstance.canvas.getBoundingClientRect().left
y = e.clientY - chartInstance.canvas.getBoundingClientRect().top
}
let rScale = chartInstance.scales[scale]
let d = Math.sqrt(Math.pow(x-rScale.xCenter, 2) + Math.pow(y-rScale.yCenter, 2))
let scalingFactor = rScale.drawingArea / (rScale.max - rScale.min)
if (rScale.options.ticks.reverse) {
v = rScale.max - (d / scalingFactor)
} else {
v = rScale.min + (d / scalingFactor)
}
let x
let y
let data = chartInstance.data.datasets[datasetIndex].data[index]
v = roundValue(v, chartInstance.options.dragDataRound)
if (radar) {
let v
if (e.touches) {
x = e.touches[0].clientX-chartInstance.canvas.getBoundingClientRect().left
y = e.touches[0].clientY-chartInstance.canvas.getBoundingClientRect().top
} else {
x = e.clientX - chartInstance.canvas.getBoundingClientRect().left
y = e.clientY - chartInstance.canvas.getBoundingClientRect().top
}
let rScale = chartInstance.scales[scale]
let d = Math.sqrt(Math.pow(x-rScale.xCenter, 2) + Math.pow(y-rScale.yCenter, 2))
let scalingFactor = rScale.drawingArea / (rScale.max - rScale.min)
if (rScale.options.ticks.reverse) {
v = rScale.max - (d / scalingFactor)
} else {
v = rScale.min + (d / scalingFactor)
}
v = roundValue(v, chartInstance.options.dragDataRound)
v = v > chartInstance.scale.max ? chartInstance.scale.max : v
v = v < chartInstance.scale.min ? chartInstance.scale.min : v
v = v > chartInstance.scale.max ? chartInstance.scale.max : v
v = v < chartInstance.scale.min ? chartInstance.scale.min : v
return v
}
data = v
}
else {
if (e.touches) {
x = chartInstance.scales[scaleX].getValueForPixel(e.touches[0].clientX-chartInstance.canvas.getBoundingClientRect().left)
y = chartInstance.scales[scale].getValueForPixel(e.touches[0].clientY-chartInstance.canvas.getBoundingClientRect().top)
} else {
x = chartInstance.scales[scaleX].getValueForPixel(e.clientX - chartInstance.canvas.getBoundingClientRect().left)
y = chartInstance.scales[scale].getValueForPixel(e.clientY - chartInstance.canvas.getBoundingClientRect().top)
}
function calcPosition(e,chartInstance,datasetIndex,index,data) {
let x,y
if (e.touches) {
x = chartInstance.scales[scaleX].getValueForPixel(e.touches[0].clientX-chartInstance.canvas.getBoundingClientRect().left)
y = chartInstance.scales[scale].getValueForPixel(e.touches[0].clientY-chartInstance.canvas.getBoundingClientRect().top)
} else {
x = chartInstance.scales[scaleX].getValueForPixel(e.clientX - chartInstance.canvas.getBoundingClientRect().left)
y = chartInstance.scales[scale].getValueForPixel(e.clientY - chartInstance.canvas.getBoundingClientRect().top)
}
x = roundValue(x, chartInstance.options.dragDataRound)
y = roundValue(y, chartInstance.options.dragDataRound)
x = x > chartInstance.scales[scaleX].max ? chartInstance.scales[scaleX].max : x
x = x < chartInstance.scales[scaleX].min ? chartInstance.scales[scaleX].min : x
x = roundValue(x, chartInstance.options.dragDataRound)
y = roundValue(y, chartInstance.options.dragDataRound)
y = y > chartInstance.scales[scale].max ? chartInstance.scales[scale].max : y
y = y < chartInstance.scales[scale].min ? chartInstance.scales[scale].min : y
x = x > chartInstance.scales[scaleX].max ? chartInstance.scales[scaleX].max : x
x = x < chartInstance.scales[scaleX].min ? chartInstance.scales[scaleX].min : x
if(chartInstance.data.datasets[datasetIndex].data[index].x !== undefined && chartInstance.options.dragX) {
data.x = x
}
y = y > chartInstance.scales[scale].max ? chartInstance.scales[scale].max : y
y = y < chartInstance.scales[scale].min ? chartInstance.scales[scale].min : y
if(chartInstance.data.datasets[datasetIndex].data[index].y !== undefined) {
data.y = y
}
else {
data = y
}
if(chartInstance.data.datasets[datasetIndex].data[index].x && chartInstance.options.dragX) {
data.x = x
}
if(chartInstance.data.datasets[datasetIndex].data[index].y) {
data.y = y
return data
} else {
if (type === 'horizontalBar') {
return x
} else {
return y
}
}
}
function updateData (chartInstance, callback) {
return () => {
if (element && event) {
const e = event.sourceEvent
const datasetIndex = element._datasetIndex
const index = element._index
let data = chartInstance.data.datasets[datasetIndex].data[index]
if (type === 'radar') {
data = calcRadar(e,chartInstance)
} else if (stacked) {
let cursorPos = calcPosition(e,chartInstance,datasetIndex,index,data)
data = cursorPos - initValue
} else {
data = calcPosition(e,chartInstance,datasetIndex,index,data)
}

@@ -121,3 +143,3 @@

}
}
}
}

@@ -130,4 +152,4 @@ }

const e = event.sourceEvent
const datasetIndex = element['_datasetIndex']
const index = element['_index']
const datasetIndex = element._datasetIndex
const index = element._index
const value = chartInstance.data.datasets[datasetIndex].data[index]

@@ -138,2 +160,3 @@ return callback(e,datasetIndex,index,value)

}
const ChartJSdragDataPlugin = {

@@ -154,2 +177,2 @@ afterInit: function(chartInstance) {

export default ChartJSdragDataPlugin
export default ChartJSdragDataPlugin

@@ -1,65 +0,33 @@

const webpack = require('webpack')
const webpackNodeExternals = require('webpack-node-externals')
const path = require('path')
const version = require('./package.json').version
const banner = 'chartjs-plugin-dragData.js\n' +
'http://chartjs.org/\n' +
'Version: ' + version + '\n\n' +
'Copyright 2017 Christoph Pahmeyer\n' +
'Released under the MIT license\n' +
'https://github.com/chrispahm/chartjs-plugin-dragData/blob/master/LICENSE.md'
const config = {
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
externals: {
'chart.js': 'Chart'
},
entry: './src/index.js',
mode: 'production',
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015'],
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
}]
},
plugins: [
new webpack.BannerPlugin(banner),
new webpack.ProvidePlugin({
Chart: 'chart.js'
}),
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true,
compress: {
warnings: false
}
})
]
]
}
}
const dist = Object.assign({}, config, {
entry: {
'chartjs-plugin-dragData': './src/index.js',
'chartjs-plugin-dragData.min': './src/index.js'
},
const dist = Object.assign({},config,{
output: {
path: './dist',
filename: '[name].js'
path: path.resolve(__dirname, 'dist'),
filename: 'chartjs-plugin-dragData.min.js'
}
})
const assets = Object.assign({}, config, {
entry: {
'chartjs-plugin-dragData': './src/index.js',
'chartjs-plugin-dragData.min': './src/index.js'
},
const assets = Object.assign({},config,{
output: {
path: './docs/assets',
filename: '[name].js'
path: path.resolve(__dirname, 'docs/assets'),
filename: 'chartjs-plugin-dragData.min.js'
}

@@ -66,0 +34,0 @@ })

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc