🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

gauge-chart

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gauge-chart - npm Package Compare versions

Comparing version

0.5.3
to
1.0.0-beta.0

.eslintignore
.eslintrc.js
.github/workflows/node.js.yml
.husky/commit-msg
.husky/pre-commit
.prettierignore
commitlint.config.js
dist/gauge/gauge-interface.d.ts
dist/gauge/gauge.d.ts
dist/gauge/gauge.spec.d.ts
dist/gauge/index.d.ts
dist/gauge/logger.d.ts
dist/gauge/needle-interface.d.ts
dist/gauge/param-checker.d.ts
dist/index.d.ts
dist/index.js
jest.config.js

1

CHANGELOG.md
## 0.5.3
- Don't format `bundle.js` with prettier.

@@ -3,0 +4,0 @@

6

examples/developing/main.js

@@ -1,4 +0,4 @@

let element = document.querySelector('#gaugeArea')
const element = document.querySelector('#gaugeArea')
let gaugeOptions = {
const gaugeOptions = {
// needle options

@@ -17,3 +17,3 @@ hasNeedle: true,

arcLabelFontSize: false,
//arcOverEffect: false,
// arcOverEffect: false,
// label options

@@ -20,0 +20,0 @@ rangeLabel: ['0', '350'],

398

examples/samples/main.js
let gauge
window.onload = function() {
let href = window.location.href
let jsonStrStartId = href.search('\\?')
let options = {}
if (jsonStrStartId >= 0) {
let jsonStr = href.substr(jsonStrStartId + 1, href.length - 1).replace(/%22/g, '"')
options = JSON.parse(jsonStr)
} else {
// DEFAULT VALUES
options = {
hasNeedle: true,
outerNeedle: false,
needleColor: 'gray',
needleStartValue: 0,
needleUpdateSpeed: 1000,
arcColors: ['rgb(44, 151, 222)', 'lightgray'],
arcDelimiters: [40],
rangeLabel: ['0', '100'],
}
}
let chartWidth = 400
let needleValue = 20
window.onload = function () {
const href = window.location.href
const jsonStrStartId = href.search('\\?')
let options = {}
if (jsonStrStartId >= 0) {
const jsonStr = href
.substr(jsonStrStartId + 1, href.length - 1)
.replace(/%22/g, '"')
options = JSON.parse(jsonStr)
} else {
// DEFAULT VALUES
options = {
hasNeedle: true,
outerNeedle: false,
needleColor: 'gray',
needleStartValue: 0,
needleUpdateSpeed: 1000,
arcColors: ['rgb(44, 151, 222)', 'lightgray'],
arcDelimiters: [40],
rangeLabel: ['0', '100'],
}
}
const chartWidth = 400
const needleValue = 20
// GAUGE DEPICTION
setGauge(false, options, chartWidth, needleValue)
// OPTIONS SETTING AND EDITOR UPDATING
let allOptions = options
const allOptions = options
allOptions.chartWidth = chartWidth

@@ -35,62 +37,92 @@ allOptions.needleValue = needleValue

function setGauge(isDel, options, chartWidth, needleValue) {
let element = document.querySelector('#gaugeArea')
if (isDel)
gauge.removeGauge()
const element = document.querySelector('#gaugeArea')
if (isDel) gauge.removeGauge()
gauge = GaugeChart.gaugeChart(element, chartWidth, options)
gauge.updateNeedle(needleValue)
}
function setEditorValues(options) {
optionNames = ['chartWidth', 'needleValue', 'hasNeedle', 'outerNeedle', 'needleColor', 'needleStartValue',
'needleUpdateSpeed', 'arcColors', 'arcDelimiters', 'rangeLabel', 'centralLabel', 'rangeLabelFontSize']
optionNames = [
'chartWidth',
'needleValue',
'hasNeedle',
'outerNeedle',
'needleColor',
'needleStartValue',
'needleUpdateSpeed',
'arcColors',
'arcDelimiters',
'rangeLabel',
'centralLabel',
'rangeLabelFontSize',
]
for (optionName of optionNames)
if (options.hasOwnProperty(optionName))
document.getElementById('input-' + optionName).value = options[optionName]
if (options.hasOwnProperty(optionName))
document.getElementById('input-' + optionName).value = options[optionName]
}
function optionChange() {
allOptionNames = ['chartWidth', 'needleValue', 'hasNeedle', 'outerNeedle', 'needleColor', 'needleStartValue',
'needleUpdateSpeed', 'arcColors', 'arcDelimiters', 'rangeLabel', 'centralLabel', 'rangeLabelFontSize']
let allOptions = {}
let chartWidth = 0
let needleValue = 0
allOptionNames = [
'chartWidth',
'needleValue',
'hasNeedle',
'outerNeedle',
'needleColor',
'needleStartValue',
'needleUpdateSpeed',
'arcColors',
'arcDelimiters',
'rangeLabel',
'centralLabel',
'rangeLabelFontSize',
]
const allOptions = {}
const chartWidth = 0
const needleValue = 0
for (optionName of allOptionNames) {
let optionElement = document.getElementById('input-' + optionName)
if (optionElement && optionElement.value) {
// delete all redundant spaces from the string
let optionVal = optionElement.value.replace(/%22/g, '"')
if (['chartWidth', 'needleValue', 'needleStartValue', 'needleUpdateSpeed',
'rangeLabelFontSize'].indexOf(optionName) >= 0) {
allOptions[optionName] = +optionVal
} else if (['hasNeedle', 'outerNeedle'].indexOf(optionName) >= 0) {
allOptions[optionName] = (optionVal == 'true')
} else if (['arcDelimiters', 'rangeLabel'].indexOf(optionName) >= 0) {
allOptions[optionName] = optionVal.split(',')
} else if (optionName === 'arcColors') {
allOptions[optionName] = colorsStrToArr(optionVal)
} else {
allOptions[optionName] = optionVal
}
}
}
setGauge(true, allOptions, allOptions['chartWidth'], allOptions['needleValue'])
const optionElement = document.getElementById('input-' + optionName)
if (optionElement && optionElement.value) {
// delete all redundant spaces from the string
const optionVal = optionElement.value.replace(/%22/g, '"')
if (
[
'chartWidth',
'needleValue',
'needleStartValue',
'needleUpdateSpeed',
'rangeLabelFontSize',
].indexOf(optionName) >= 0
) {
allOptions[optionName] = +optionVal
} else if (['hasNeedle', 'outerNeedle'].indexOf(optionName) >= 0) {
allOptions[optionName] = optionVal == 'true'
} else if (['arcDelimiters', 'rangeLabel'].indexOf(optionName) >= 0) {
allOptions[optionName] = optionVal.split(',')
} else if (optionName === 'arcColors') {
allOptions[optionName] = colorsStrToArr(optionVal)
} else {
allOptions[optionName] = optionVal
}
}
}
setGauge(true, allOptions, allOptions.chartWidth, allOptions.needleValue)
}
function colorsStrToArr(str) {
let colorArr = []
const colorArr = []
let color = ''
let openBracket = false
for (char of str) {
if (char === '(') {
openBracket = true
color += char
} else if (char === ')') {
openBracket = false
color += char
} else if (char === ',' && !openBracket) {
colorArr.push(color)
color = ''
} else {
color += char
}
if (char === '(') {
openBracket = true
color += char
} else if (char === ')') {
openBracket = false
color += char
} else if (char === ',' && !openBracket) {
colorArr.push(color)
color = ''
} else {
color += char
}
}

@@ -102,110 +134,132 @@ colorArr.push(color)

function copyAsCode() {
let optionNames = ['chartWidth', 'needleValue']
let extraOptionNames = ['hasNeedle', 'outerNeedle', 'needleColor', 'needleStartValue',
'needleUpdateSpeed', 'arcColors', 'arcDelimiters', 'rangeLabel', 'centralLabel', 'rangeLabelFontSize']
code = ''
for (optionName of optionNames) {
let optionVal = document.getElementById('input-' + optionName).value
code += 'let ' + optionName + ' = ' + optionVal + '\n'
}
code += 'let options = {\n'
for (optionName of extraOptionNames) {
let optionVal = document.getElementById('input-' + optionName).value
if (optionVal) {
if (['hasNeedle', 'outerNeedle'].indexOf(optionName) >= 0) {
if (optionVal !== 'blank')
code += '\t' + optionName + ': ' + optionVal + ',\n'
} else if (optionName === 'needleColor' || optionName === 'centralLabel') {
code += '\t' + optionName + ': "' + optionVal + '",\n'
} else if (optionName === 'arcDelimiters') {
code += '\t' + optionName + ': [' + optionVal + '],\n'
} else if (optionName === 'arcColors') {
code += '\t' + optionName + ': ['
for (val of colorsStrToArr(optionVal)) {
code += '"' + val + '",'
}
code = code.slice(0, -1)
code += '],\n'
} else if (optionName === 'rangeLabel') {
code += '\t' + optionName + ': ['
for (val of optionVal.split(',')) {
code += '"' + val + '",'
}
code = code.slice(0, -1)
code += '],\n'
} else {
code += '\t' + optionName + ': ' + optionVal + ',\n'
}
}
}
code += '}'
let codeElement = document.getElementById('code')
codeElement.value = code
codeElement.select()
document.execCommand('Copy')
const optionNames = ['chartWidth', 'needleValue']
const extraOptionNames = [
'hasNeedle',
'outerNeedle',
'needleColor',
'needleStartValue',
'needleUpdateSpeed',
'arcColors',
'arcDelimiters',
'rangeLabel',
'centralLabel',
'rangeLabelFontSize',
]
code = ''
for (optionName of optionNames) {
const optionVal = document.getElementById('input-' + optionName).value
code += 'let ' + optionName + ' = ' + optionVal + '\n'
}
code += 'let options = {\n'
for (optionName of extraOptionNames) {
const optionVal = document.getElementById('input-' + optionName).value
if (optionVal) {
if (['hasNeedle', 'outerNeedle'].indexOf(optionName) >= 0) {
if (optionVal !== 'blank')
code += '\t' + optionName + ': ' + optionVal + ',\n'
} else if (
optionName === 'needleColor' ||
optionName === 'centralLabel'
) {
code += '\t' + optionName + ': "' + optionVal + '",\n'
} else if (optionName === 'arcDelimiters') {
code += '\t' + optionName + ': [' + optionVal + '],\n'
} else if (optionName === 'arcColors') {
code += '\t' + optionName + ': ['
for (val of colorsStrToArr(optionVal)) {
code += '"' + val + '",'
}
code = code.slice(0, -1)
code += '],\n'
} else if (optionName === 'rangeLabel') {
code += '\t' + optionName + ': ['
for (val of optionVal.split(',')) {
code += '"' + val + '",'
}
code = code.slice(0, -1)
code += '],\n'
} else {
code += '\t' + optionName + ': ' + optionVal + ',\n'
}
}
}
code += '}'
const codeElement = document.getElementById('code')
codeElement.value = code
codeElement.select()
document.execCommand('Copy')
}
function saveAsPng() {
let doctype = '<?xml version="1.0" standalone="no"?>'
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'
// serializing SVG XML to a string.
let source = (new XMLSerializer()).serializeToString(d3.select('svg').node())
// creating a file blob of our SVG.
let blob = new Blob([ doctype + source], { type: 'image/svg+xml;charset=utf-8' })
let url = window.URL.createObjectURL(blob)
let width = document.querySelector('svg').getBoundingClientRect().width
let height = document.querySelector('svg').getBoundingClientRect().height
// Putting the svg into an image tag so that the Canvas element can read it in.
let img = d3.select('body').append('img')
.attr('id', 'img')
.attr('width', width)
.attr('height', height)
.style('display', 'none')
.node()
let href = d3.select('body').append('a')
.attr('id', 'link')
.attr('download', 'gauge.png')
img.onload = function() {
// putting the image into a canvas element.
let canvas = d3.select('body').append('canvas')
.attr('id', 'canvas')
.style('display', 'none')
.node()
canvas.width = width
canvas.height = height
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
let canvasUrl = canvas.toDataURL('image/png')
let img2 = d3.select('#link').append('img')
.attr('id', 'img2')
.attr('width', width)
.attr('height', height)
.style('display', 'none')
.node()
// base64 encoded version of the PNG
img2.src = canvasUrl
let link = d3.select('#link')
.attr('href', canvasUrl)
document.getElementById('link').click()
// deleting redundant data
let imgNode = document.getElementById('img')
let img2Node = document.getElementById('img2')
let canvasNode = document.getElementById('canvas')
let linkNode = document.getElementById('link')
imgNode.parentNode.removeChild(imgNode)
img2Node.parentNode.removeChild(img2Node)
canvasNode.parentNode.removeChild(canvasNode)
linkNode.parentNode.removeChild(linkNode)
}
// starting loading the image.
img.src = url
const doctype =
'<?xml version="1.0" standalone="no"?>' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'
// serializing SVG XML to a string.
const source = new XMLSerializer().serializeToString(d3.select('svg').node())
// creating a file blob of our SVG.
const blob = new Blob([doctype + source], {
type: 'image/svg+xml;charset=utf-8',
})
const url = window.URL.createObjectURL(blob)
const width = document.querySelector('svg').getBoundingClientRect().width
const height = document.querySelector('svg').getBoundingClientRect().height
// Putting the svg into an image tag so that the Canvas element can read it in.
const img = d3
.select('body')
.append('img')
.attr('id', 'img')
.attr('width', width)
.attr('height', height)
.style('display', 'none')
.node()
const href = d3
.select('body')
.append('a')
.attr('id', 'link')
.attr('download', 'gauge.png')
img.onload = function () {
// putting the image into a canvas element.
const canvas = d3
.select('body')
.append('canvas')
.attr('id', 'canvas')
.style('display', 'none')
.node()
canvas.width = width
canvas.height = height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
const canvasUrl = canvas.toDataURL('image/png')
const img2 = d3
.select('#link')
.append('img')
.attr('id', 'img2')
.attr('width', width)
.attr('height', height)
.style('display', 'none')
.node()
// base64 encoded version of the PNG
img2.src = canvasUrl
const link = d3.select('#link').attr('href', canvasUrl)
document.getElementById('link').click()
// deleting redundant data
const imgNode = document.getElementById('img')
const img2Node = document.getElementById('img2')
const canvasNode = document.getElementById('canvas')
const linkNode = document.getElementById('link')
imgNode.parentNode.removeChild(imgNode)
img2Node.parentNode.removeChild(img2Node)
canvasNode.parentNode.removeChild(canvasNode)
linkNode.parentNode.removeChild(linkNode)
}
// starting loading the image.
img.src = url
}
function copyAsLink() {
let codeElement = document.getElementById('code')
codeElement.value = code
codeElement.select()
document.execCommand('Copy')
const codeElement = document.getElementById('code')
codeElement.value = code
codeElement.select()
document.execCommand('Copy')
}

120

package.json
{
"name": "gauge-chart",
"version": "0.5.3",
"version": "1.0.0-beta.0",
"description": "**A library for creating nice and flexible gauge charts.**",
"main": "dist/bundle.js",
"types": "dist/index.d.ts",
"main": "dist/index.js",
"author": "",
"license": "ISC",
"scripts": {
"test": "karma start",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"dev": "webpack-dev-server --config webpack/dev.config.js --hot",
"build": "ENV=production webpack --config webpack/prod.config.js",
"build:prod_warn": "ENV=prod_warn webpack --config webpack/prod.config.js",
"typedoc": "typedoc --out docs --exclude '**/*.spec.ts' ./src/",
"precommit": "lint-staged",
"fix-all-ts": "prettier --write src/**/*.ts && tslint --fix -c ./tslint.json 'src/**/*.ts'",
"start": "npm run dev"
"test": "jest",
"bundle": "esbuild src/index.ts --bundle --target=es2020 --outdir=dist",
"bundle:watch": "npm run bundle -- --watch",
"bundle:prod": "npm run bundle -- --minify",
"compile-types": "tsc",
"build": "rm -rf dist && npm run bundle:prod && npm run compile-types",
"prepare": "husky install",
"dev-server": "vite . --open /examples/developing/",
"dev": "concurrently 'npm run dev-server' 'npm run bundle:watch'",
"lint": "prettier --check . && eslint src/**/*.ts",
"prepublish": "npm run build"
},
"lint-staged": {
"*.ts": [
"prettier --write",
"tslint --fix -c ./tslint.json 'src/**/*.ts'",
"git add"
"**/*": [
"prettier --write --ignore-unknown"
],
"**/*.{js,ts}": [
"eslint --fix",
"prettier --write --ignore-unknown"
]
},
"author": "“Maxim Maltsev” <“maltsevmn@ya.ru”>, “Alexey Karpov” <“karpovad@yandex.ru”>",
"license": "MIT",
"devDependencies": {
"@types/d3": "^4.13.2",
"@types/jasmine": "^2.8.16",
"@types/node": "^7.10.7",
"@types/source-map": "^0.5.0",
"@types/webpack": "^2.2.16",
"awesome-typescript-loader": "^3.5.0",
"css-loader": "^2.1.1",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.0.1",
"extract-text-webpack-plugin": "^2.1.2",
"husky": "^0.14.3",
"istanbul-instrumenter-loader": "^2.0.0",
"jasmine-core": "^2.99.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.2",
"karma-jasmine": "^1.1.2",
"karma-mocha-reporter": "^2.2.3",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^3.0.13",
"karma-webpack": "^2.0.13",
"lint-staged": "^7.3.0",
"prettier": "^1.18.2",
"source-map-loader": "^0.2.0",
"tslint": "^5.1.0",
"tslint-microsoft-contrib": "^5.2.1",
"tsutils": "^1.9.1",
"typedoc": "^0.14.2",
"typedoc-webpack-plugin": "^1.1.4",
"typescript": "^3.6.3",
"uglify-js": "^2.8.29",
"uglifyjs-webpack-plugin": "^0.4.6",
"webpack": "^2.7.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^2.11.5",
"webpack-merge": "^4.1.0"
},
"dependencies": {
"d3": "^4.13.0",
"d3-scale-chromatic": "^1.1.1"
"d3-scale-chromatic": "^1.5.0"
},
"directories": {
"doc": "docs",
"example": "examples"
},
"repository": {
"type": "git",
"url": "git+https://github.com/recogizer/gauge-chart.git"
},
"bugs": {
"url": "https://github.com/recogizer/gauge-chart/issues"
},
"homepage": "https://github.com/recogizer/gauge-chart#readme"
"devDependencies": {
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"@types/d3": "^4.13.12",
"@types/d3-scale-chromatic": "^1.5.1",
"@types/jest": "^28.1.6",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"concurrently": "^7.3.0",
"esbuild": "^0.14.51",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-promise": "^6.0.0",
"husky": "^8.0.1",
"jest": "^28.1.3",
"jest-environment-jsdom": "^28.1.3",
"lint-staged": "^13.0.3",
"prettier": "2.7.1",
"ts-jest": "^28.0.7",
"typescript": "^4.7.4",
"vite": "^3.0.4"
}
}

4

README.md

@@ -24,3 +24,3 @@ # Gauge Chart

```html
<script src="https://unpkg.com/gauge-chart@latest/dist/bundle.js"></script>
<script src="https://unpkg.com/gauge-chart@latest/dist/bundle.js"></script>
```

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

```html
<div id="gaugeArea"></div>
<div id="gaugeArea"></div>
```

@@ -36,0 +36,0 @@

6

src/gauge/gauge-interface.ts

@@ -38,5 +38,5 @@ import { easeCubic, interpolateNumber } from 'd3'

.tween('needle animation', () => {
let prevValue = this.needle.getValue()
let i = interpolateNumber(prevValue, needleValue)
return t => this.needle.setValue(i(t))
const prevValue = this.needle.getValue()
const i = interpolateNumber(prevValue, needleValue)
return (t) => this.needle.setValue(i(t))
})

@@ -43,0 +43,0 @@ }

256

src/gauge/gauge.spec.ts

@@ -10,3 +10,3 @@ import * as d3 from 'd3'

svgHtml = svgHtml.slice(svgHtml.search(startChar) + 1, svgHtml.length)
let svgA = svgHtml
const svgA = svgHtml
.slice(0, stopChar ? svgHtml.search(stopChar) : svgHtml.length)

@@ -67,10 +67,10 @@ .split(',')

describe('arc outlining', () => {
let offset = 10
let chartWidth = 200 - offset * 2
let chartHeight = 100 - offset * 2
let outerRadius = chartHeight * 0.75
let element = document.createElement('test')
const offset = 10
const chartWidth = 200 - offset * 2
const chartHeight = 100 - offset * 2
const outerRadius = chartHeight * 0.75
const element = document.createElement('test')
it('checks arc svg outline', () => {
let svg = d3
const svg = d3
.select(element)

@@ -80,4 +80,4 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let arcDelimiters = []
let arcColors = ['red']
const arcDelimiters = []
const arcColors = ['red']
gauge.arcOutline(

@@ -102,3 +102,3 @@ svg,

it('checks correct path of arc', () => {
let svg = d3
const svg = d3
.select(element)

@@ -108,4 +108,4 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let arcDelimiters = []
let arcColors = ['red']
const arcDelimiters = []
const arcColors = ['red']
gauge.arcOutline(

@@ -133,7 +133,7 @@ svg,

svgHtml = pathValueChecker(svgHtml, 'L', 'A', [60, 0])
svgHtml = pathValueChecker(svgHtml, 'A', '', [60, 60, 0, 1, 0, -60, 0])
pathValueChecker(svgHtml, 'A', '', [60, 60, 0, 1, 0, -60, 0])
})
it('checks splitting of arc', () => {
let svg = d3
const svg = d3
.select(element)

@@ -143,4 +143,4 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let arcDelimiters = [50]
let arcColors = ['red', 'blue']
const arcDelimiters = [50]
const arcColors = ['red', 'blue']
gauge.arcOutline(

@@ -220,3 +220,3 @@ svg,

svgHtml = pathValueChecker(svgHtml, 'L', 'A', [80, 0])
svgHtml = pathValueChecker(svgHtml, 'A', '', [80, 80, 0, 0, 0, 0, -80])
pathValueChecker(svgHtml, 'A', '', [80, 80, 0, 0, 0, 0, -80])
})

@@ -226,10 +226,10 @@ })

describe('needle base outlining', () => {
let offset = 10
let chartWidth = 200 - offset * 2
let chartHeight = 100 - offset * 2
let element = document.createElement('test')
let needleColor = 'gray'
const offset = 10
const chartWidth = 200 - offset * 2
const chartHeight = 100 - offset * 2
const element = document.createElement('test')
const needleColor = 'gray'
it('checks needle svg outline', () => {
let svg = d3
const svg = d3
.select(element)

@@ -239,4 +239,4 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = ''
let outerNeedle = false
const centralLabel = ''
const outerNeedle = false
gauge.needleBaseOutline(

@@ -255,3 +255,3 @@ svg,

it('checks correct path of needle base without label', () => {
let svg = d3
const svg = d3
.select(element)

@@ -261,4 +261,4 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = ''
let outerNeedle = false
const centralLabel = ''
const outerNeedle = false
gauge.needleBaseOutline(

@@ -278,7 +278,7 @@ svg,

svgHtml = pathValueChecker(svgHtml, 'A', 'A', [8, 8, 0, 1, 1, 8, 0])
svgHtml = pathValueChecker(svgHtml, 'A', '', [8, 8, 0, 1, 1, -8, 0])
pathValueChecker(svgHtml, 'A', '', [8, 8, 0, 1, 1, -8, 0])
})
it('checks correct path of needle base with label', () => {
let svg = d3
const svg = d3
.select(element)

@@ -288,4 +288,4 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = '23'
let outerNeedle = false
const centralLabel = '23'
const outerNeedle = false
gauge.needleBaseOutline(

@@ -305,3 +305,3 @@ svg,

svgHtml = pathValueChecker(svgHtml, 'A', 'A', [40, 40, 0, 1, 1, 40, 0])
svgHtml = pathValueChecker(svgHtml, 'A', '', [40, 40, 0, 1, 1, -40, 0])
pathValueChecker(svgHtml, 'A', '', [40, 40, 0, 1, 1, -40, 0])
})

@@ -311,11 +311,11 @@ })

describe('needle outlining', () => {
let offset = 10
let chartWidth = 200 - offset * 2
let chartHeight = 100 - offset * 2
let element = document.createElement('test')
let outerRadius = chartHeight * 0.75
let needleColor = 'gray'
const offset = 10
const chartWidth = 200 - offset * 2
const chartHeight = 100 - offset * 2
const element = document.createElement('test')
const outerRadius = chartHeight * 0.75
const needleColor = 'gray'
it('checks needle svg outline', () => {
let svg = d3
const svg = d3
.select(element)

@@ -325,5 +325,5 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = ''
let outerNeedle = false
let needleStartValue = 0
const centralLabel = ''
const outerNeedle = false
const needleStartValue = 0
gauge.needleOutline(

@@ -344,3 +344,3 @@ svg,

it('checks correct path of needle without label', () => {
let svg = d3
const svg = d3
.select(element)

@@ -350,5 +350,5 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = ''
let outerNeedle = false
let needleStartValue = 0
const centralLabel = ''
const outerNeedle = false
const needleStartValue = 0
gauge.needleOutline(

@@ -372,7 +372,7 @@ svg,

svgHtml = pathValueChecker(svgHtml, 'L', 'L', [0, -4])
svgHtml = pathValueChecker(svgHtml, 'L', '', [-58.2, 0])
pathValueChecker(svgHtml, 'L', '', [-58.2, 0])
})
it('checks correct path of needle with label', () => {
let svg = d3
const svg = d3
.select(element)

@@ -382,5 +382,5 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = '23'
let outerNeedle = false
let needleStartValue = 0
const centralLabel = '23'
const outerNeedle = false
const needleStartValue = 0
gauge.needleOutline(

@@ -397,3 +397,3 @@ svg,

// define the whole path string (M...L...L...L... for svg arc)
console.log('hi')
let svgHtml = svg

@@ -405,3 +405,3 @@ .html()

svgHtml = pathValueChecker(svgHtml, 'L', 'L', [-42, -9.3])
svgHtml = pathValueChecker(svgHtml, 'L', '', [-58.2, 0])
pathValueChecker(svgHtml, 'L', '', [-58.2, 0])
})

@@ -411,11 +411,11 @@ })

describe('label outlining', () => {
let offset = 10
let areaWidth = 200
let chartWidth = 200 - offset * 2
let chartHeight = 100 - offset * 2
let element = document.createElement('test')
let outerRadius = chartHeight * 0.75
const offset = 10
const areaWidth = 200
const chartWidth = 200 - offset * 2
const chartHeight = 100 - offset * 2
const element = document.createElement('test')
const outerRadius = chartHeight * 0.75
it('checks label svg outline', () => {
let svg = d3
const svg = d3
.select(element)

@@ -425,5 +425,5 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = '2'
let rangeLabel = ['0', '4']
let rangeLabelFontSize = null
const centralLabel = '2'
const rangeLabel = ['0', '4']
const rangeLabelFontSize = null
gauge.labelOutline(

@@ -445,3 +445,3 @@ svg,

it('checks correct text of gauge with central label', () => {
let svg = d3
const svg = d3
.select(element)

@@ -451,5 +451,5 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = '2'
let rangeLabel = []
let rangeLabelFontSize = null
const centralLabel = '2'
const rangeLabel = []
const rangeLabelFontSize = null
gauge.labelOutline(

@@ -467,3 +467,3 @@ svg,

let svgHtml = svg.html().split('</text>')
const svgHtml = svg.html().split('</text>')
svgHtml.pop() // removed last element (empty string)

@@ -484,3 +484,3 @@ expect(svgHtml[0]).toBe(

it('checks correct text of gauge with range labels', () => {
let svg = d3
const svg = d3
.select(element)

@@ -490,5 +490,5 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = ''
let rangeLabel = ['0', '4']
let rangeLabelFontSize = null
const centralLabel = ''
const rangeLabel = ['0', '4']
const rangeLabelFontSize = null
gauge.labelOutline(

@@ -506,3 +506,3 @@ svg,

let svgHtml = svg.html().split('</text>')
const svgHtml = svg.html().split('</text>')
svgHtml.pop() // removed last element (empty string)

@@ -525,3 +525,3 @@ expect(svgHtml[0]).toBe(

it('checks correct text of gauge with central and range labels', () => {
let svg = d3
const svg = d3
.select(element)

@@ -531,5 +531,5 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = '2'
let rangeLabel = ['0', '4']
let rangeLabelFontSize = null
const centralLabel = '2'
const rangeLabel = ['0', '4']
const rangeLabelFontSize = null
gauge.labelOutline(

@@ -547,3 +547,3 @@ svg,

let svgHtml = svg.html().split('</text>')
const svgHtml = svg.html().split('</text>')
svgHtml.pop() // removed last element (empty string)

@@ -569,8 +569,19 @@ expect(svgHtml[0]).toBe(

describe('chart outlining', () => {
let consoleWarn: any
beforeEach(() => {
consoleWarn = console.warn
console.warn = jest.fn()
})
afterEach(() => {
console.warn = consoleWarn
})
it('checks correct parameters of final svg', () => {
let areaWidth = 200
let element = document.createElement('test')
let gaugeOptions = {}
let g = gauge.gaugeChart(element, areaWidth, gaugeOptions)
let svgHtml = (g as any).svg.html().split(/<\/[a-z]+>/g)
const areaWidth = 200
const element = document.createElement('test')
const gaugeOptions = {}
const g = gauge.gaugeChart(element, areaWidth, gaugeOptions)
const svgHtml = (g as any).svg.html().split(/<\/[a-z]+>/g)
svgHtml.pop() // removed last element (empty string)

@@ -580,3 +591,3 @@ expect(svgHtml.length).toBe(5)

let textNum = 0
svgHtml.forEach(svgEl => {
svgHtml.forEach((svgEl) => {
if (svgEl.substr(0, 5) === '<path') pathNum += 1

@@ -591,11 +602,11 @@ else if (svgEl.substr(0, 5) === '<text') textNum += 1

describe('needle value updating', () => {
let offset = 10
let chartWidth = 200 - offset * 2
let chartHeight = 100 - offset * 2
let element = document.createElement('test')
let outerRadius = chartHeight * 0.75
let needleColor = 'gray'
const offset = 10
const chartWidth = 200 - offset * 2
const chartHeight = 100 - offset * 2
const element = document.createElement('test')
const outerRadius = chartHeight * 0.75
const needleColor = 'gray'
it('checks correct path of new needle position', done => {
let svg = d3
it('checks correct path of new needle position', (done) => {
const svg = d3
.select(element)

@@ -605,6 +616,6 @@ .append('svg')

.attr('height', chartHeight + offset * 2)
let centralLabel = ''
let outerNeedle = false
let needleStartValue = 0
let needle = gauge.needleOutline(
const centralLabel = ''
const outerNeedle = false
const needleStartValue = 0
const needle = gauge.needleOutline(
svg,

@@ -619,4 +630,4 @@ chartHeight,

)
let needleUpdateSpeed = 1000
let g = new Gauge(svg, needleUpdateSpeed, needle)
const needleUpdateSpeed = 1000
const g = new Gauge(svg, needleUpdateSpeed, needle)
g.updateNeedle(10)

@@ -632,3 +643,3 @@ setTimeout(() => {

svgHtml = pathValueChecker(svgHtml, 'L', 'L', [1.2, -3.8])
svgHtml = pathValueChecker(svgHtml, 'L', '', [-55.4, -18])
pathValueChecker(svgHtml, 'L', '', [-55.4, -18])
done()

@@ -640,6 +651,21 @@ }, needleUpdateSpeed * 2)

describe('console warnings and errors', () => {
let consoleWarn: any
let consoleError: any
beforeEach(() => {
consoleWarn = console.warn
consoleError = console.error
console.warn = jest.fn()
console.error = jest.fn()
})
afterEach(() => {
console.warn = consoleWarn
console.error = consoleError
})
it('spies an error about delimiters range', () => {
spyOn(console, 'error')
let arcDelimiters = [-10, 5]
let message =
const arcDelimiters = [-10, 5]
const message =
'Gauge-chart Error: gauge delimiters have to be LARGER than 0 and LESS than 100'

@@ -650,5 +676,4 @@ gaugeParam.delimiterRangeErrorChecker(arcDelimiters)

it('spies an error about delimiters sorting', () => {
spyOn(console, 'error')
let arcDelimiters = [50, 5]
let message = 'Gauge-chart Error: gauge delimiters are not sorted'
const arcDelimiters = [50, 5]
const message = 'Gauge-chart Error: gauge delimiters are not sorted'
gaugeParam.delimiterSortErrorChecker(arcDelimiters)

@@ -658,6 +683,5 @@ expect(console.error).toHaveBeenCalledWith(message)

it('spies a warning about lack of colors', () => {
spyOn(console, 'warn')
let arcDelimiters = [2]
let arcColors = []
let message =
const arcDelimiters = [2]
const arcColors = []
const message =
'Gauge-chart Warning: list of colors is not complete, standard colors added to the chart'

@@ -668,6 +692,5 @@ gaugeParam.colorsLackWarnChecker(arcDelimiters, arcColors)

it('spies a warning about too many colors', () => {
spyOn(console, 'warn')
let arcDelimiters = []
let arcColors = ['red', 'blue']
let message =
const arcDelimiters = []
const arcColors = ['red', 'blue']
const message =
'Gauge-chart Warning: list of colors exceeds number of slices, therefore it was shortened'

@@ -678,5 +701,4 @@ gaugeParam.colorsExcessWarnChecker(arcDelimiters, arcColors)

it('spies a warning about neddle value range', () => {
spyOn(console, 'warn')
let needleValue = -10
let message =
const needleValue = -10
const message =
'Gauge-chart Warning: value of needdle is less that 0 or larger than 100'

@@ -683,0 +705,0 @@ gaugeParam.needleValueWarnChecker(needleValue)

85

src/gauge/gauge.ts
import { arc, easeLinear, select } from 'd3'
import { schemePaired } from 'd3-scale-chromatic'
import './gauge.css'

@@ -21,3 +20,3 @@ import { Gauge, GaugeInterface } from './gauge-interface'

if (arcDelimiters.length > arcColors.length - 1) {
let colorDiff = arcDelimiters.length - arcColors.length + 1
const colorDiff = arcDelimiters.length - arcColors.length + 1
for (let i = 0; i < colorDiff; i++) {

@@ -76,4 +75,4 @@ arcColors.push(schemePaired[i % schemePaired.length])

arcColors.forEach((color, i) => {
let startAngle = perc2RadWithShift(i ? arcDelimiters[i - 1] : 0)
let endAngle = perc2RadWithShift(arcDelimiters[i] || 100) // 100 for last arc slice
const startAngle = perc2RadWithShift(i ? arcDelimiters[i - 1] : 0)
const endAngle = perc2RadWithShift(arcDelimiters[i] || 100) // 100 for last arc slice

@@ -86,3 +85,3 @@ let gaugeArc = arc()

let innerArc = svg
const innerArc = svg
.append('path')

@@ -107,3 +106,3 @@ .attr('d', gaugeArc)

let outerArc = svg
const outerArc = svg
.append('path')

@@ -144,8 +143,8 @@ .attr('d', gaugeArc)

if (arcDelimiters[i]) {
let endAngle = perc2RadWithShift(arcDelimiters[i])
const endAngle = perc2RadWithShift(arcDelimiters[i])
if (padding && paddingColor) {
let scale = 1.1
let centerX = chartHeight + offset * 2
let centerY = offset - chartHeight * (scale - 1)
const scale = 1.1
const centerX = chartHeight + offset * 2
const centerY = offset - chartHeight * (scale - 1)

@@ -167,3 +166,3 @@ svg

'rotate(' +
endAngle * 180 / Math.PI +
(endAngle * 180) / Math.PI +
', ' +

@@ -179,8 +178,8 @@ 0 +

// end of arc
let spacing = 1.07
let x =
const spacing = 1.07
const x =
chartHeight +
offset * 2 +
Math.cos(endAngle - Math.PI / 2) * (chartHeight * spacing)
let y =
const y =
chartHeight +

@@ -191,3 +190,3 @@ offset +

// font size
let fontScale = 0.09
const fontScale = 0.09
arcLabelFontSize =

@@ -197,6 +196,6 @@ arcLabelFontSize || Math.round(chartHeight * fontScale)

// measure text width
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
ctx.font = arcLabelFontSize + 'px'
let size = ctx.measureText(arcLabels[i])
const size = ctx.measureText(arcLabels[i])

@@ -209,5 +208,5 @@ // calc offset:

// endAngle = PI/2 => offset = 0
let xPadding = 4
let xOffset =
(endAngle - Math.PI / 2) / Math.PI * (size.width + xPadding)
const xPadding = 4
const xOffset =
((endAngle - Math.PI / 2) / Math.PI) * (size.width + xPadding)

@@ -245,5 +244,5 @@ // now place label

// Different circle radiuses in the base of needle
let innerGaugeRadius =
const innerGaugeRadius =
centralLabel || outerNeedle ? chartHeight * 0.5 : chartHeight * 0.1
let gaugeArc = arc()
const gaugeArc = arc()
.innerRadius(innerGaugeRadius)

@@ -290,4 +289,4 @@ .outerRadius(0)

) {
let needleValue = needleStartValue
let needle = new Needle(
const needleValue = needleStartValue
const needle = new Needle(
svg,

@@ -328,27 +327,27 @@ needleValue,

) {
let arcWidth = chartHeight - outerRadius
const arcWidth = chartHeight - outerRadius
// Fonts specification (responsive to chart size)
rangeLabelFontSize = rangeLabelFontSize || Math.round(chartHeight * 0.18)
let realRangeFontSize = rangeLabelFontSize * 0.6 // counted empirically
let centralLabelFontSize = rangeLabelFontSize * 1.5
let realCentralFontSize = centralLabelFontSize * 0.56
const realRangeFontSize = rangeLabelFontSize * 0.6 // counted empirically
const centralLabelFontSize = rangeLabelFontSize * 1.5
const realCentralFontSize = centralLabelFontSize * 0.56
// Offsets specification (responsive to chart size)
let leftRangeLabelOffsetX = rangeLabel[0]
const leftRangeLabelOffsetX = rangeLabel[0]
? areaWidth / 2 -
outerRadius -
arcWidth / 2 -
realRangeFontSize * rangeLabel[0].length / 2
(realRangeFontSize * rangeLabel[0].length) / 2
: 0
let rightRangeLabelOffsetX = rangeLabel[1]
const rightRangeLabelOffsetX = rangeLabel[1]
? areaWidth / 2 +
outerRadius +
arcWidth / 2 -
realRangeFontSize * rangeLabel[1].length / 2
(realRangeFontSize * rangeLabel[1].length) / 2
: 0
let rangeLabelOffsetY = offset + chartHeight + realRangeFontSize * 2
let centralLabelOffsetX =
areaWidth / 2 - realCentralFontSize * centralLabel.length / 2
let centralLabelOffsetY = offset + chartHeight
const rangeLabelOffsetY = offset + chartHeight + realRangeFontSize * 2
const centralLabelOffsetX =
areaWidth / 2 - (realCentralFontSize * centralLabel.length) / 2
const centralLabelOffsetY = offset + chartHeight

@@ -400,3 +399,3 @@ svg

): GaugeInterface {
let defaultGaugeOption = {
const defaultGaugeOption = {
hasNeedle: false,

@@ -444,7 +443,7 @@ outerNeedle: false,

let offset = areaWidth * 0.075
let chartHeight = areaWidth * 0.5 - offset * 2
let chartWidth = areaWidth - offset * 2
let outerRadius = chartHeight * 0.75
let svg = select(element)
const offset = areaWidth * 0.075
const chartHeight = areaWidth * 0.5 - offset * 2
const chartWidth = areaWidth - offset * 2
const outerRadius = chartHeight * 0.75
const svg = select(element)
.append('svg')

@@ -451,0 +450,0 @@ .attr('width', chartWidth + offset * 2)

2

src/gauge/index.ts
export * from './gauge'
export { GaugeInterface } from './gauge-interface'
export type { GaugeInterface } from './gauge-interface'

2

src/gauge/logger.ts

@@ -10,3 +10,3 @@ /**

export function warn(...args) {
if (ENV !== 'production') console.warn.apply(console, arguments)
console.warn.apply(console, arguments)
}

16

src/gauge/needle-interface.ts

@@ -90,8 +90,8 @@ import { curveLinear, line } from 'd3'

needleWidth = this.outerNeedle ? this.chartHeight * 0.25 : needleWidth
let needleHeadLength = this.outerNeedle
const needleHeadLength = this.outerNeedle
? this.outerRadius * 1.4
: this.outerRadius * 0.97
let needleTailLength = needleWidth * 0.5
let needleWaypointOffset = needleWidth * 0.5
let needleAngle = gauge.perc2RadWithShift(this.needleValue)
const needleTailLength = needleWidth * 0.5
const needleWaypointOffset = needleWidth * 0.5
const needleAngle = gauge.perc2RadWithShift(this.needleValue)
let needleCoords: any

@@ -136,6 +136,6 @@

needleWaypointOffset * 1.5 * Math.sin(needleAngle) -
needleWaypointOffset / 3 * Math.cos(needleAngle),
(needleWaypointOffset / 3) * Math.cos(needleAngle),
y:
-(needleWaypointOffset * 1.5) * Math.cos(needleAngle) -
needleWaypointOffset / 3 * Math.sin(needleAngle),
(needleWaypointOffset / 3) * Math.sin(needleAngle),
},

@@ -145,6 +145,6 @@ {

needleWaypointOffset * 1.5 * Math.sin(needleAngle) +
needleWaypointOffset / 3 * Math.cos(needleAngle),
(needleWaypointOffset / 3) * Math.cos(needleAngle),
y:
-(needleWaypointOffset * 1.5) * Math.cos(needleAngle) +
needleWaypointOffset / 3 * Math.sin(needleAngle),
(needleWaypointOffset / 3) * Math.sin(needleAngle),
},

@@ -151,0 +151,0 @@ {

4

src/index.ts

@@ -0,1 +1,5 @@

import * as gauge from './gauge'
globalThis.GaugeChart = gauge
export * from './gauge'

19

tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"target": "es2020",
"moduleResolution": "node",

@@ -9,2 +8,3 @@ "declaration": true,

"stripInternal": true,
"emitDeclarationOnly": true,
"emitDecoratorMetadata": true,

@@ -14,19 +14,8 @@ "experimentalDecorators": true,

"sourceMap": true,
"noEmit": true,
"noEmitHelpers": true,
"strictNullChecks": false,
"lib": ["dom", "es6"],
"typeRoots": ["node_modules/@types"],
"types": ["jasmine", "node", "source-map", "webpack"]
"types": ["jest"]
},
"exclude": ["node_modules", "dist"],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
"exclude": ["node_modules", "dist"]
}
. prettierignore
.eslintrc
.nojekyll
.vscode/settings.json
dist/bundle.js
dist/docs/assets/css/main.css
dist/docs/assets/css/main.css.map
dist/docs/assets/images/icons.png
dist/docs/assets/images/icons@2x.png
dist/docs/assets/images/widgets.png
dist/docs/assets/images/widgets@2x.png
dist/docs/assets/js/main.js
dist/docs/assets/js/search.js
dist/docs/classes/_gauge_gauge_interface_.gauge.html
dist/docs/classes/_gauge_needle_interface_.needle.html
dist/docs/globals.html
dist/docs/index.html
dist/docs/interfaces/_gauge_gauge_.gaugeoptions.html
dist/docs/interfaces/_gauge_gauge_interface_.gaugeinterface.html
dist/docs/modules/_gauge_gauge_.html
dist/docs/modules/_gauge_gauge_interface_.html
dist/docs/modules/_gauge_gauge_spec_.html
dist/docs/modules/_gauge_index_.html
dist/docs/modules/_gauge_logger_.html
dist/docs/modules/_gauge_needle_interface_.html
dist/docs/modules/_gauge_param_checker_.html
dist/docs/modules/_index_.html
dist/styles.css
docs/assets/css/main.css
docs/assets/css/main.css.map
docs/assets/images/icons.png
docs/assets/images/icons@2x.png
docs/assets/images/widgets.png
docs/assets/images/widgets@2x.png
docs/assets/js/main.js
docs/assets/js/search.js
docs/classes/_gauge_gauge_interface_.gauge.html
docs/classes/_gauge_needle_interface_.needle.html
docs/globals.html
docs/index.html
docs/interfaces/_gauge_gauge_.gaugeoptions.html
docs/interfaces/_gauge_gauge_interface_.gaugeinterface.html
docs/modules/_gauge_gauge_.html
docs/modules/_gauge_gauge_interface_.html
docs/modules/_gauge_index_.html
docs/modules/_gauge_logger_.html
docs/modules/_gauge_needle_interface_.html
docs/modules/_gauge_param_checker_.html
docs/modules/_index_.html
karma.conf.js
src/custom-typings.d.ts
src/gauge/gauge.css
tslint.json
typedoc.json
webpack/common.config.js
webpack/dev.config.js
webpack/helpers.js
webpack/karma.conf.js
webpack/prod.config.js
webpack/spec-bundle.js
webpack/test.config.js
examples/developing/index.html

Sorry, the diff of this file is not supported yet

examples/samples/edit.html

Sorry, the diff of this file is not supported yet

examples/samples/index.html

Sorry, the diff of this file is not supported yet

examples/samples/style.css

Sorry, the diff of this file is not supported yet