chart2music - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/index.d.ts

@@ -5,16 +5,20 @@ interface AudioEngine {
 }
-interface AudioEngineConstructor {
-    new (context: AudioContext): AudioEngine;
-}
 
-declare enum SUPPORTED_CHART_TYPES {
-    LINE = "line"
-}
+declare type SonifyTypes = {
+    data: dataSet | dataPoint[] | number[];
+    element: HTMLElement;
+    axes?: {
+        x?: AxisData;
+        y?: AxisData;
+        y2?: AxisData;
+    };
+    title?: string;
+    cc?: HTMLElement;
+    type?: SUPPORTED_CHART_TYPES;
+    audioEngine?: AudioEngine;
+    options?: c2mOptions;
+};
 declare type dataSet = {
     [groupName: string]: dataPoint[];
 };
-declare type StatBundle = {
-    high?: number;
-    low?: number;
-};
 declare type dataPoint = {
@@ -24,3 +28,2 @@ x: number;
     y2?: number;
-    callback?: () => void;
 };
@@ -33,18 +36,17 @@ declare type AxisData = {
 };
-declare type SonifyTypes = {
-    data: dataSet | dataPoint[] | number[];
-    element: HTMLElement;
-    axes?: {
-        x?: AxisData;
-        y?: AxisData;
-        y2?: AxisData;
-    };
-    title?: string;
-    cc?: HTMLElement;
-    type?: SUPPORTED_CHART_TYPES;
-    audioEngine?: AudioEngineConstructor;
+declare enum SUPPORTED_CHART_TYPES {
+    LINE = "line"
+}
+declare type StatBundle = {
+    high?: number;
+    low?: number;
 };
+declare type c2mCallbackType = {
+    slice: string;
+    index: number;
+};
 declare type c2mOptions = {
     enableSound?: boolean;
     enableSpeech?: boolean;
+    onFocusCallback?: (point: c2mCallbackType) => void;
 };
@@ -51,0 +53,0 @@

dist/index.js

@@ -239,3 +239,14 @@ var c2mChart = (function (exports) {
     const calcPan = (pct) => (pct * 2 - 1) * 0.98;
-    const generateSummary = (title, x, y) => `Sonified chart "${title}", x is ${x.label} from ${x.format(x.minimum)} to ${x.format(x.maximum)}, y is ${y.label} from ${y.format(y.minimum)} to ${y.format(y.maximum)}. Use arrow keys to navigate. Press H for more hotkeys.`;
+    const generateSummary = ({ type, title, dataRows, x, y, y2 }) => {
+        const text = [`Sonified ${type} chart "${title}"`];
+        if (dataRows > 1) {
+            text.push(`contains ${dataRows} ${type}s`);
+        }
+        text.push(`x is "${x.label}" from ${x.format(x.minimum)} to ${x.format(x.maximum)}`);
+        text.push(`y is "${y.label}" from ${y.format(y.minimum)} to ${y.format(y.maximum)}`);
+        if (y2) {
+            text.push(`alternative y is "${y2.label}" from ${y2.format(y2.minimum)} to ${y2.format(y2.maximum)}`);
+        }
+        return `${text.join(", ")}. Use arrow keys to navigate. Press H for more hotkeys.`;
+    };
     const calculateAxisMinimum = (data, prop) => {
@@ -309,5 +320,9 @@ const values = data
             this._providedAudioEngine = input.audioEngine;
+            this._title = input.title ?? "";
             this._chartElement = input.element;
+            if (!this._chartElement.hasAttribute("alt") &&
+                !this._chartElement.hasAttribute("aria-label")) {
+                this._chartElement.setAttribute("aria-label", `Sonified chart, ${this._title}`);
+            }
             this._ccElement = input.cc ?? this._chartElement;
-            this._title = input.title ?? "";
             this._initializeData(input.data);
@@ -320,3 +335,16 @@ this._calculateMetadataByGroup();
             }
-            this._summary = generateSummary(this._title, this._xAxis, this._yAxis);
+            if (input?.options) {
+                this._options = {
+                    ...this._options,
+                    ...input?.options
+                };
+            }
+            this._summary = generateSummary({
+                type: input.type,
+                title: this._title,
+                x: this._xAxis,
+                y: this._yAxis,
+                dataRows: this._groups.length,
+                y2: this._y2Axis
+            });
             ScreenReaderBridge.addAriaAttributes(this._ccElement);
@@ -692,4 +720,4 @@ this._sr = new ScreenReaderBridge(this._ccElement);
             if (!this._audioEngine && context) {
-                this._audioEngine = new (this._providedAudioEngine ??
-                    OscillatorAudioEngine)(context);
+                this._audioEngine =
+                    this._providedAudioEngine ?? new OscillatorAudioEngine(context);
             }
@@ -705,3 +733,7 @@ if (!this._audioEngine) {
                 this._audioEngine.playDataPoint(HERTZ[yBin], xPan, NOTE_LENGTH);
-                current.callback?.();
+                console.log("on focus callback", this._options);
+                this._options?.onFocusCallback?.({
+                    slice: this._groups[this._groupIndex],
+                    index: this._pointIndex
+                });
                 return;
@@ -712,3 +744,7 @@ }
                 this._audioEngine.playDataPoint(HERTZ[yBin], xPan, NOTE_LENGTH);
-                current.callback?.();
+                console.log("on focus callback", this._options);
+                this._options?.onFocusCallback?.({
+                    slice: this._groups[this._groupIndex],
+                    index: this._pointIndex
+                });
                 return;
@@ -720,3 +756,7 @@ }
                 this._audioEngine.playDataPoint(HERTZ[yBin], xPan, NOTE_LENGTH);
-                current.callback?.();
+                console.log("on focus callback", this._options);
+                this._options?.onFocusCallback?.({
+                    slice: this._groups[this._groupIndex],
+                    index: this._pointIndex
+                });
                 return;
@@ -731,3 +771,7 @@ }
             });
-            current.callback?.();
+            console.log("on focus callback", this._options);
+            this._options?.onFocusCallback?.({
+                slice: this._groups[this._groupIndex],
+                index: this._pointIndex
+            });
         }
@@ -734,0 +778,0 @@ _speakCurrent() {

package.json

 {
     "name": "chart2music",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "main": "dist/index.js",
@@ -12,11 +12,12 @@ "module": "dist/index.mjs",
     "keywords": [
+        "a11y",
         "accessibility",
-        "a11y",
-        "chart",
-        "graph",
         "audio",
         "audio graph",
+        "chart",
+        "dataviz",
         "data visualization",
-        "dataviz",
-        "screen reader"
+        "graph",
+        "screen reader",
+        "sonification"
     ],
@@ -45,8 +46,8 @@ "homepage": "https://github.com/julianna-langston/chart2music#readme",
         "@types/jest": "^28.1.3",
-        "@typescript-eslint/eslint-plugin": "^5.27.1",
-        "@typescript-eslint/parser": "^5.10.2",
+        "@typescript-eslint/eslint-plugin": "^5.9.1",
+        "@typescript-eslint/parser": "^5.30.7",
         "concurrently": "^7.2.2",
-        "eslint": "^8.17.0",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-jsdoc": "^39.3.2",
+        "eslint": "^8.20.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-jsdoc": "^39.3.3",
         "http-server": "^14.1.1",
@@ -60,8 +61,11 @@ "husky": "^6.0.0",
         "rollup": "^2.75.7",
-        "rollup-plugin-delete": "^2.0.0",
+        "rollup-plugin-delete": "^1.2.0",
         "rollup-plugin-dts": "^4.2.2",
         "ts-jest": "^28.0.5",
         "tslib": "^2.4.0",
-        "typescript": "^4.7.3"
+        "typescript": "4.7.4"
+    },
+    "resolutions": {
+        "glob-parent": "^6.0.1"
     }
 }

README.md

@@ -42,3 +42,4 @@ # Chart2Music
 Some of the examples you will find there include:
+* [Simple, no frills code example](https://codepen.io/chart2music/pen/ExEmqbr).
 * [Multi-line plot](https://codepen.io/chart2music/full/gOegZpm).
 * [Bar-line plot](https://codepen.io/chart2music/full/QWmdpOJ).

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76930

increased by14.57%

Number of package files

15

increased by150%

Lines of code

1853

increased by17.13%

Number of lines in readme file

44

increased by2.33%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes