catchart - npm Package Compare versions

Comparing version 2.0.10 to 3.0.0

client.js

@@ -1,5 +0,6 @@
-const Chart = require('chart.js')
-const domReady = require('domready')
-const pattern = require('patternomaly')
+import Chart from 'chart.js/auto'
 
+import domReady from 'domready'
+import pattern from 'patternomaly'
+
 domReady(main)
@@ -20,2 +21,30 @@
 
+	const chartConfig = {
+		data: chartData,
+		type: context.chartType,
+		options: {
+			title: {
+				display: true,
+				text: context.title
+			},
+
+			scales: {
+				yLeft: {
+					position: 'left'
+				}
+			}
+		}
+	}
+
+	const { left, right } = context.yAxisAlignment || {}
+
+	if (right && right.length > 0) {
+		chartConfig.options.scales.yRight = {
+			position: 'right',
+			grid: {
+				drawOnChartArea: false, // only want the grid lines for one axis to show up
+			}
+		}
+	}
+
 	for (let i = 0; i < context.fieldCount; i++) {
@@ -32,25 +61,21 @@ let borderColor = pickColor()
 
-		if (context.noFill) {
-			backgroundColor = new Color(0, 0, 0, 0)
-		}
-
-		chartData.datasets.push({
-			label: `dataset #${i + 1}`,
+		const dataset = {
+			yAxisID: 'yLeft',
 			borderColor: borderColor.toString(),
 			backgroundColor,
 			borderWidth: 1,
+			fill: true,
+			tension: 0.2,
+			label: `dataset #${i + 1}`,
 			data: []
-		})
+		}
+
+		if (right && right.includes(i)) {
+			dataset.yAxisID = 'yRight'
+		}
+
+		chartData.datasets.push(dataset)
 	}
 
-	const chart = new Chart('myChart', {
-		data: chartData,
-		options: {
-			title: {
-				display: true,
-				text: context.title
-			}
-		},
-		type: context.chartType
-	})
+	const chart = new Chart(document.getElementById('myChart'), chartConfig)
 
@@ -70,2 +95,3 @@ const host = global.document.location.host
 		let entry = JSON.parse(event.data)
+
 		for (let i = 0; i < entry.values.length; i++) {
@@ -72,0 +98,0 @@ let data = chartData.datasets[i].data

config.js

@@ -29,2 +29,4 @@ const rc = require('rc')
 
+	autoAlignYAxis: true,
+
 	// show labels on values in the chart
@@ -31,0 +33,0 @@ showValueLabels: false,

emitter.js

@@ -12,3 +12,2 @@ const program = require('commander')
 	.action(() => {
-
 		let count = 1
@@ -76,2 +75,31 @@ setInterval(() => {
 
+program.command('high-variability')
+	.action(() => {
+
+		let count = 1
+		let countHigh = 1
+
+		setInterval(() => {
+			let row = `${next()},${nextHigh()},${next()}`
+			console.error(`emitter: ${row}`)
+			console.log(row)
+		}, 1000)
+
+		function next() {
+			if (Math.random() > 0.5) {
+				return count += 99
+			} else {
+				return count -= 99
+			}
+		}
+
+		function nextHigh() {
+			if (Math.random() > 0.5) {
+				return countHigh += 1000
+			} else {
+				return countHigh -= 1000
+			}
+		}
+	})
+
 program.parse(process.argv)
@@ -78,0 +106,0 @@

index.js

@@ -142,4 +142,4 @@ const hcat = require('hcat')
 			debug('fieldCount is set to "auto"')
-			let parsed = state.parseFunction(data)
-			let sliced = state.dataFunction(parsed)
+			const parsed = state.parseFunction(data)
+			const sliced = state.dataFunction(parsed)
 			config.fieldCount = sliced.length
@@ -149,2 +149,16 @@ debug('setting fieldCount to "%d", deduced from first row of data', sliced.length)
 
+		let yAxisAlignment
+
+		if (config.autoAlignYAxis) {
+			debug('autoAlignYAxis is enabled')
+			const parsed = state.parseFunction(data)
+			const sliced = state.dataFunction(parsed)
+			const nMags = sliced.map(calcNumberMagnitude)
+			const magAvg = average(nMags)
+			debug('values magnitude vector is %o, magnitude average is %s', nMags, magAvg)
+
+			yAxisAlignment = splitByAverage(nMags, magAvg)
+			debug(`data series aligment is: left %o, right %o`, yAxisAlignment.left, yAxisAlignment.right)
+		}
+
 		const clientContext = {
@@ -157,3 +171,4 @@ chartType: config.chartType,
 			fieldCount: config.fieldCount,
-			showValueLabels: config.showValueLabels
+			showValueLabels: config.showValueLabels,
+			yAxisAlignment
 		}
@@ -287,2 +302,22 @@
 
+function calcNumberMagnitude(n) {
+	return Math.floor(Math.log10(Math.abs(n)))
+}
+
+function average(values) {
+	return values.reduce((prev, curr) => curr + prev, 0) / values.length
+}
+
+function splitByAverage(values, avg) {
+	const left = []
+	const right = []
+
+	for (let i = 0; i < values.length; i++) {
+		if (values[i] <= avg) left.push(i)
+		else right.push(i)
+	}
+
+	return { right, left }
+}
+
 function extractJson(fields) {
@@ -289,0 +324,0 @@ return data => {

package.json

 {
   "name": "catchart",
-  "version": "2.0.10",
+  "version": "3.0.0",
   "description": "Pipe something from command line to a browser chart",
@@ -14,6 +14,6 @@ "license": "MIT",
   "scripts": {
-    "build_client": "npx gulp build"
+    "build_client": "npx webpack"
   },
   "dependencies": {
-    "chart.js": "^2.9.3",
+    "chart.js": "^3.8.0",
     "commander": "^2.13.0",
@@ -34,11 +34,4 @@ "custom-human-time": "^1.0.3",
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "babelify": "^8.0.0",
-    "browserify": "^14.5.0",
-    "browserify-css": "^0.15.0",
-    "gulp": "^3.9.1",
-    "gulp-bro": "^0.1.0",
-    "uglifyify": "^5.0.2"
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.9.2"
   },
@@ -45,0 +38,0 @@ "keywords": [

program.js

@@ -21,2 +21,3 @@ const program = require('commander')
 value in each row will be considered the label`, config.labelSource)
+	.option('--autoAlignYAxis', 'automatically align data sets to the left or right based on their values, this is an experimental feature', config.autoAlignYAxis)
 	.option('--showValueLabels', 'show labels on values in the chart', config.showValueLabels)
@@ -37,2 +38,18 @@ .option('--noFill', 'Do not fill the area under the chart line with color', config.noFill)
 
+if (program.autoAlignYAxis === undefined) {
+	program.autoAlignYAxis = config.autoAlignYAxis
+}
+
+if (program.showValueLabels === undefined) {
+	program.showValueLabels = config.showValueLabels
+}
+
+if (program.noFill === undefined) {
+	program.noFill = config.noFill
+}
+
+if (program.usePatterns === undefined) {
+	program.usePatterns = config.usePatterns
+}
+
 module.exports = program

README.md

@@ -38,3 +38,3 @@ # catchart
 ```
-chart types: `line`, `bar`, `radar`, `pie`
+chart types: `line`, `bar`, `radar`, `pie`, `doughnut`, `scatter`, `polar`, `bubble`
 
@@ -41,0 +41,0 @@ <img src="/4.png?raw=true" width="400">

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

859603

increased by42.73%

Dev dependency count

2

decreased by-77.78%

Number of package files

16

increased by6.67%

Lines of code

2364

increased by55.02%

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

1

decreased by-75%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

Dependency changes

• + Addedchart.js@3.9.1(transitive)

• - Removedchart.js@2.9.4(transitive)

• - Removedchartjs-color@2.4.1(transitive)

• - Removedchartjs-color-string@0.6.0(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.31.1.4(transitive)

• - Removedmoment@2.30.1(transitive)

• Updatedchart.js@^3.8.0