LCJS v8.0.0

Author: Niilo Keinänen

README.md

@@ -78,13 +78,13 @@ Direct developer email support can be purchased through a [Support Plan][4] or b
 © LightningChart Ltd 2009-2022. All rights reserved.
 
 
-[XY cartesian chart]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/ChartXY.html
-[Step options]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/enums/StepOptions.html
-[Individual point coloring]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/IndividualPointFill.html
-[UI layout builders]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/UILayoutBuilders.html
-[UI backgrounds]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/UIBackgrounds.html
-[UI elements builders]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/UIElementBuilders.html
-[UI button pictures]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/UIButtonPictures.html
-[UI position origins]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/UIOrigins.html
+[XY cartesian chart]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/ChartXY.html
+[Step options]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/enums/StepOptions.html
+[Individual point coloring]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/classes/IndividualPointFill.html
+[UI layout builders]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/UILayoutBuilders.html
+[UI backgrounds]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/UIBackgrounds.html
+[UI elements builders]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/UIElementBuilders.html
+[UI button pictures]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/UIButtonPictures.html
+[UI position origins]: https://lightningchart.com/js-charts/api-documentation/v8.0.0/variables/UIOrigins.html
 [Progressive random generator]: https://lightning-chart.github.io/xydata/classes/progressiverandomgenerator.html
 

package.json

@@ -17,8 +17,8 @@
     "webpack-stream": "^7.0.0"
   },
   "dependencies": {
-    "@lightningchart/lcjs": "^7.1.0",
-    "@lightningchart/xydata": "^1.4.0"
+    "@lightningchart/lcjs": "^8.0.0",
+    "@lightningchart/xydata": "^1.5.0"
   },
   "lightningChart": {
     "eID": "0005"

src/index.js

@@ -5,12 +5,20 @@
 const lcjs = require('@lightningchart/lcjs')
 
 // Extract required parts from LightningChartJS.
-const { lightningChart, UILayoutBuilders, UIElementBuilders, emptyFill, UIOrigins, AxisTickStrategies, Themes } = lcjs
+const { lightningChart, UILayoutBuilders, UIElementBuilders, emptyFill, UIOrigins, AxisTickStrategies, LegendEntryClickBehaviors, Themes } = lcjs
 
 const chart = lightningChart({
             resourcesBaseUrl: new URL(document.head.baseURI).origin + new URL(document.head.baseURI).pathname + 'resources/',
         })
     .ChartXY({
+        legend: {
+            title: 'Step options',
+            entries: {
+                events: {
+                    click: LegendEntryClickBehaviors.focusClicked,
+                }
+            }
+        },
         theme: Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined,
     })
     .setTitle('Survey Report')
@@ -19,7 +27,7 @@ const stepSeries = []
 const addSeries = (step) =>
     stepSeries.push(
         chart
-            .addPointLineAreaSeries({ dataPattern: 'ProgressiveX', automaticColorIndex: 0 })
+            .addPointLineSeries({ automaticColorIndex: 0 })
             .setName(step)
             .setVisible(false)
             .setCurvePreprocessing({ type: 'step', step })
@@ -91,7 +99,7 @@ let changedData = []
 
 stepSeries.forEach((values, i) => {
     changedData = data.map((changex, index) => ({ x: index, y: changex.y }))
-    values.add(changedData)
+    values.appendJSON(changedData)
 })
 
 changedData.forEach((_, index) => {
@@ -105,39 +113,5 @@ changedData.forEach((_, index) => {
 })
 chart.getDefaultAxisY().setTitle('Amount / Month').setInterval({ start: 0, end: 100, stopAxisAfter: false })
 
-// Add UI controls for switching between step-mode-options.
-// NOTE: This is not the focus of the example, and will be better covered elsewhere.
-const stepControls = chart.addUIElement(UILayoutBuilders.Column)
-stepControls.addElement(UIElementBuilders.TextBox).setText('Step options')
-const buttonLayout = stepControls.addElement(UILayoutBuilders.Row)
-const radioButtons = []
-let switching = false
-const addRadioButton = (series) => {
-    const checkBox = buttonLayout.addElement(UIElementBuilders.CheckBox).setButtonOnFillStyle(emptyFill).setButtonOffFillStyle(emptyFill)
-    radioButtons.push(checkBox)
-    series.attach(checkBox)
-    checkBox.setOn(false)
-    // Add radio button logic immediately afterwards so that it is applied after plot.
-    // Attach logic (otherwise plot logic will override this)
-    setTimeout(() => {
-        checkBox.addEventListener('switch', (event) => {
-            const state = event.state
-            if (switching || !state) {
-                return
-            }
-            // Deactivate other buttons
-            for (const button of radioButtons) if (button !== checkBox) button.setOn(false)
-        })
-    }, 100)
-    series.addEventListener('visiblechange', (e) => {
-        checkBox.setPointerEvents(!e.isVisible)
-    })
-}
-addRadioButton(stepSeries[0])
-addRadioButton(stepSeries[1])
-addRadioButton(stepSeries[2])
-const margin = 10
-stepControls.setPosition({ x: 30, y: 80 }).setOrigin(UIOrigins.CenterBottom).setMargin(margin)
-
 // Apply initial selection
 stepSeries[1].setVisible(true)