@chartiq/react-components - npm Package Compare versions

Comparing version 8.6.0-beta.5 to 8.6.0-beta.6

package.json

 {
   "name": "@chartiq/react-components",
-  "version": "8.6.0-beta.5",
+  "version": "8.6.0-beta.6",
   "description": "React Components for ChartIQ library",
-  "main": "lib/index.js",
+  "main": "index.js",
   "files": [
-    "lib/",
+    "Chart/",
+    "Advanced/",
+    "ActiveTrader/",
+    "CrossSection",
     "src/"
   ],
   "scripts": {
-    "build": "babel src -d lib/ --copy-files --source-maps inline",
-    "build:prod": "babel src -d lib --copy-files",
-    "watch": "babel src -d lib/ -w --copy-files --source-maps inline",
+    "build": "babel src -d . --copy-files --source-maps inline",
+    "build:prod": "babel src -d . --copy-files",
+    "clean": "rm -rf Chart/ Advanced/ styles/ ActiveTrader/ CrossSection/ node_modules/",
+    "watch": "babel src -d . -w --copy-files --source-maps inline",
     "prepublish": "npm run build:prod"
@@ -15,0 +19,0 @@ },

README.md

 # ChartIQ React Components
 
+## Contents
+- [Overview](#overview)
+- [Included Components](#included-components)
+  - [Charts](#charts)
+  - [Examples](#examples)
+- [Getting Started](#getting-started)
+- [Basic Customization](#basic-customization)
+  - [Customizing the Chart config](#customizing-the-chart-config)
+  - [Adding a quotefeed](#adding-your-own-quotefeed)
+  - [Modifying the Template](#customizing-component-template)
+  - [Adding a lookup driver](#adding-your-own-lookupdriver)
+- [Setting add-ons](#setting-add-ons)
+- [Setting plug-ins](#setting-plug\-ins)
+- [Advanced Customization](#advanced-customization)
 ## Overview
@@ -15,10 +29,20 @@
 
+Each component includes only the bare necessities to allow for maximum customization with the smallest size possible. To get started, we also include example components that come with ChartIQ's example files loaded.
+
 The exported components include:
 
-- HelloWorld — A simple HelloWorld example without any extra UI features to get you started.
+#### Charts
+
+- Chart — Core chart component to get started for financial time series charts.
 - AdvancedChart — Full featured advanced chart component with everything needed for technical analysis.
-- MultiChart — Implementation of dual AdvancedCharts in a single component.
-- ActiveTraderWorkstation — Sets up an information-rich component ready for traders.
-- TermStructure — Creates a working CrossSection (TermStructure) component for dealing with non–time series data.
+- ActiveTrader/Workstation — Sets up an information-rich component ready for traders.
+- CrossSection/Chart — Creates a working CrossSection (previously TermStructure) component for dealing with non–time series data.
 
+#### Examples
+- ChartExample — CoreChart with all included ChartIQ example files.
+- AdvancedExample — AdvancedChart with all included ChartIQ example files.
+- ActiveTrader/WorkstationExample — Workstation with all included ChartIQ example files.
+- CrossSection/ChartExample — CrossSection Chart with all included ChartIQ example files.
+
+
 ## Getting Started
@@ -29,3 +53,3 @@
 ```js
-npm install chartiq-8.4.0 // or whatever version you are using!
+npm install chartiq-8.6.0 // or whatever version you are using!
 ```
@@ -36,6 +60,6 @@
 ```jsx
-import { AdvancedChart } from "@chartiq/react-components"
+import Chart from '@chartiq/react-components'
 
-export default function Chart() {
-	return <AdvancedChart />
+export default function MyChart() {
+	return <Chart />
 }
@@ -47,57 +71,141 @@
 
+Chart components accept two basic props, config and resources, that allow them to be customized. The config describes how the chart should be set up, what addOns and plug-ins should be enabled, hotkeys, and more. Resources are passed to the chart and contain utilities that the chart should use, such as a quoteFeed or a storage constructor.
+
 ### Customizing the chart config
 
-All components work with the default configuration for the chart which can be modified to enable various features, set chart properties, load data, setup quotefeeds and more (for full documentation see [ChartIQ Default Chart Configuration](https://documentation.chartiq.com/tutorial-Chart%20Configuration.html)).
+All components accept a config prop which can be modified to enable various features, set chart properties, load data and more (for full documentation see [ChartIQ Default Chart Configuration](https://documentation.chartiq.com/tutorial-Chart%20Configuration.html)).
 
-There are two ways you can get the config for a component. You can import `getConfig` or `getCustomConfig` from the components resources file. Each will return a chart config object that you can adjust.
+By default, you may pass in only the the parts of the config you want to customize, and these changes will be merged onto the the default configuration. For example:
 
-The `getConfig` method will import the defaultConfig from the ChartIQ SDK and add the quoteFeedSimulator so you can immediately get started developing with simulated data.
+```jsx
+import Chart from @chartiq/react-components
 
-The `getCustomConfig` method will return a specific config for each component. **If you do not provide a config prop, this is what will be used.**
+export default function MyChart() {
+	return <Chart config={{ initialSymbol: 'FB' }} />
+}
+```
+creates a chart with an initial symbol of 'FB' instead of 'AAPL' (the initial symbol of the default configuration).
 
-```js
-import {
-		getConfig,
-		getCustomConfig
-	} from @chartiq/react-components/containers/AdvancedChart/resources
+### Adding your own quotefeed
 
-const config = getConfig()
-config.initialSymbol = 'FB'
+By default, all components will load simulated data using the quoteFeedSimulator so that you have some working data to get started. When you are ready to add your own quotefeed, it should be aded to the resources prop passed into the chart component.
+```jsx
+import MyCustomQuotefeed from './myCustomQuotefeed'
+
+<Chart resources={{ quoteFeed: MyCustomQuoteFeed }}}/>
 ```
 
-Each method accepts a resources object where you can pass a quotefeed, nameValueStore, and more. Full documentation can be found [here](https://documentation.chartiq.com/tutorial-Chart%20Configuration.html)
+### Customizing Component Template
 
-### Adding your own quotefeed
+Every component accepts children that it will render instead of its default JSX template. You can start by copying the Template.jsx file from the Chart/ directory to your own src/ directory and making changes.
 
-By default all components will load the quoteFeedSimulator so that you have some working data to get started with. When you are ready to add your own quotefeed, it should be aded to the config prop passed into the chart component.
+```jsx
+import MyChartTemplate from './MyTemplate.jsx'
 
-After importing your own quotefeed, and getting a config to pass into the chart, assign your quotefeeed to the config and  pass it to the component as a prop.
+<Chart>
+	<MyChartTemplate />
+</Chart>
+```
 
+### Adding your own LookupDriver
+
+The chart configuration includes the default Lookup.ChartIQ implementation but you can substitute your own lookup driver to power symbol searches.
+
 ```jsx
-import MyCustomQuotefeed from './myCustomQuotefeed'
-import { getCustomConfig } from '@chartiq/react-components/containers/AdvancedChart/resources'
+import Chart from '@chartiq/react-components'
+import CustomSymbolLookup from './myCustomSymbolLookup'
 
-const config = getCustomConfig({ resources: { quoteFeed: myCustomQuoteFeed }})
-
-<AdvancedChart config={config}/>
+<Chart config={{ lookupDriver: CustomSymbolLookup }} />
 ```
 
-### Customizing Component Template
+More information about [Lookup Drivers](https://documentation.chartiq.com/CIQ.ChartEngine.Driver.Lookup.html) can be found in the [data integration](https://documentation.chartiq.com/tutorial-DataIntegrationQuoteFeeds.html#main) ChartIQ Documentation.
 
-Every component accepts children that it will render instead of its default JSX template. 
-### Addiong your own LookupDriver
 
-The chart configuration includes the default Lookup.ChartIQ implementation but you can substitute your own lookup driver to power symbol searches. After getting a config object you can assign a custom lookup.
+## Setting add-ons
 
+The default configuration contains initialization for all add ons (see `config.addOns`) and filters which are enabled with the `config.enabledAddOns` property. If you would like to disable an add on, set the value in `config.enabledAddOns` to null. For example to disable the RangeSlider add-on:
+
 ```jsx
-import customSymbolLookup from './myCustomSymbolLookup'
-import { getCustomConfig } from '@chartiq/react-components/containers/AdvancedChart/resources'
+import Chart from 'chartiq/react-components/Chart'
 
-const config = getCustomConfig()
+<Chart config={{enabledAddOns: { rangeSlider: null } }} />
 
-config.lookupDriver = customSymbolLookup
+```
 
-<AdvancedChart config={config}/>
+If you would like to pass custom configuration options to a specific add on then you must pass the arguments to the `config.addOns` property and make sure the add on is included in the `config.enabledAddOns` property. For example: 
+
+```jsx
+import Chart from 'chartiq/react-components/Chart'
+const config = {
+  addOns: {
+    continuousZoom: {
+      periodicities: [
+        // daily interval data
+        {period: 1,   interval: "month"},
+        {period: 1,   interval: "week"},
+        {period: 1,   interval: "day"},
+      ],
+      boundaries: {
+        maxCandleWidth: 20,
+        minCandleWidth: 5
+      }
+    }
+  },
+  enabledAddOns: {
+    continousZoom: true
+  }
+}
+<Chart config={config} />
 ```
 
-More information about [Lookup Drivers](https://documentation.chartiq.com/CIQ.ChartEngine.Driver.Lookup.html) can be found in the [data integration](https://documentation.chartiq.com/tutorial-DataIntegrationQuoteFeeds.html#main) ChartIQ Documentation.
+This configuration would enable the continous zoom add on for daily data only with a custom bondary width.
+## Setting plug-ins
+
+ChartIQ comes with a variety of plug-ins that add enhanced functionality to charts. The default chart configuration contains entries to start plugins once they are imported.
+
+**Note:** Plug-ins are optional extras that must be purchased. To determine the plug-ins included in your library, see the *./node_modules/chartiq/plugins* folder.
+
+The application includes the ChartIQ plug-ins as component resources that are enabled by uncommenting the relevant imports in the component resources file.
+
+For example, to enable the Trade from Chart (TFC) plug-in for `Core` Chart, uncomment the following lines in the [ChartExample.jsx](./src/Chart/ChartExample.jsx) file in the *./src/Chart/* folder:
+
+```js
+// import 'chartiq/plugins/tfc/tfc-loader';
+// import 'chartiq/plugins/tfc/tfc-demo';
+
+```
+
+To enable the Market Depth chart and L2 Heat Map when using `AdvancedChart` from [Chart/Advanced](./src/Chart/Advanced.jsx) inside your own component 
+
+```js
+#MyComponent.js
+import Chart, { CIQ } from "@chartiq/react-components/Chart/Advanced"
+import 'chartiq/plugins/activetrader/cryptoiq';
+import 'chartiq/examples/feeds/L2_simulator'; /* for use with cryptoiq */
+
+// Don't forget to turn on L2 data simulation!
+function simulate({ chartEngine }) {
+    CIQ. simulateL2({ chartEngine, onInterval: 1000, onTrade: true });
+}
+
+export default function MyComponent() {
+    return <Chart chartInitialized={simulate} />
+}
+```
+
+There may be a scenario (like loading multiple charts in one document or a single page app) where you need to manually disable a plugin for a certain chart. If you need to disable a plugin it can be disabled by setting its value in `config.plugins` to null. For example loading a cross section chart with a time series chart:
+
+```jsx
+import Chart from '@chartiq/react-components'
+
+export default function MyTimeSeriesChart() {
+  return <Chart config={{ plugins: { crosssection: null } }} />
+}
+```
+
+
+## Advanced Customization
+
+It is possible customize the webcomponents that are rendered inside the Template.jsx files. To see an example refer to [ChartIQ React App README](https://github.com/chartiq/chartiq-react-app/#customization).
+
+Additional documentantion on web components in the ChartIQ library can be found on [documentation.chartiq.com](https://documentation.chartiq.com/tutorial-Web%20Component%20Interface.html).

src/ActiveTrader/index.js

@@ -1,3 +0,1 @@
-import React from "react";
-
 import { default as Workstation, CIQ } from "./Workstation";
@@ -7,18 +5,4 @@ import tfcHtml from "chartiq/plugins/tfc/tfcHtml";
 import { getConfig, getCustomConfig } from "./resources"; // ChartIQ library resources
-import "./Workstation.css";
-import WorkstationPage from "./WorkstationPage";
+import WorkstationExample from "./WorkstationExample";
 
-export default function ({ chartInitialized, config,resources }) {
-	const configObj = getCustomConfig({ resources });
-	CIQ.extend(configObj, config);
-
-	return (
-		<Workstation
-			config={configObj}
-			chartInitialized={chartInitialized}
-			tfcTemplate={tfcHtml}
-		/>
-	);
-}
-
-export { WorkstationPage, CIQ, getConfig, getCustomConfig, tfcHtml }
+export {Workstation as default, WorkstationExample, CIQ, getConfig, getCustomConfig, tfcHtml }

src/ActiveTrader/Workstation.jsx

 import React from "react";
-import { CIQ } from "chartiq/js/componentUI";
+import "chartiq/js/advanced"
+import { CIQ } from "chartiq/js/components";
 
@@ -8,7 +9,18 @@ import "chartiq/js/extras/svgcharts/piechart";
 import 'chartiq/plugins/activetrader/cryptoiq';
+import 'chartiq/plugins/activetrader/cryptoiq.css'
 
 // TFC plugin
 import 'chartiq/plugins/tfc/tfc-loader';
+import 'chartiq/plugins/tfc/tfc.css';
 
 import ChartTemplate from "./Template";
+
+import './Workstation.css'
+import 'chartiq/css/normalize.css';
+import 'chartiq/css/stx-chart.css';
+import 'chartiq/css/chartiq.css'
+
+import './library-overrides.css'
+
+import { getCustomConfig } from "./resources"; // ChartIQ library resources
 const { channelWrite } = CIQ.UI.BaseComponent.prototype;
@@ -21,9 +33,23 @@
  * @export
- * @class ActiveTraderWorkstation
+ * @class Workstation
  * @extends {React.Component}
  */
-export default class ActiveTraderWorkstation extends React.Component {
+export default class Workstation extends React.Component {
+	/**
+	 * @constructor
+	 * @param {object} [props] React props
+	 * @param {object} [props.config] Configuration used for the chart.
+	 * @param {object} [props.resources] Object of resources passed into configuration to be applied
+	 * @param {Workstation~chartInitialized} [props.chartInitialized] Callback that fires when the chart is created
+	 */
 	constructor(props) {
 		super(props);
+		const { config, resources } = props;
+
 		this.container = React.createRef();
+
+		const configObj = getCustomConfig({ resources });
+		CIQ.extend(configObj, config);
+		this.config = configObj;
+
 		this.stx = null;
@@ -35,3 +61,4 @@ this.UIContext = null;
 		const container = this.container.current;
-		const { config, chartInitialized } = this.props;
+		const { chartInitialized } = this.props;
+		const { config } = this;
 
@@ -136,3 +163,3 @@ const uiContext = (this.UIContext = new CIQ.UI.Chart().createChartAndUI({
 	render() {
-		let chartTemplate = <ChartTemplate />;
+		let chartTemplate = <ChartTemplate config={this.config} />;
 		if (this.props.children) chartTemplate = this.props.children;
@@ -143,1 +170,6 @@
 }
+/**
+ * @callback Workstation~chartInitialized
+ * @param {CIQ.ChartEngine} chartEngine
+ * @param {CIQ.UI.Context} uiContext
+ */

src/CrossSection/Chart.jsx

 import React from "react";
-import { CIQ } from "chartiq/js/components";
+import { CIQ } from "chartiq/js/standard";
+import "chartiq/js/components"
 import "chartiq/plugins/crosssection/core";
@@ -9,22 +10,39 @@ import "chartiq/plugins/crosssection/datepicker";
 import "chartiq/plugins/crosssection/crosssection.css"
+import "chartiq/plugins/crosssection/datepicker.css"
 
 import ChartTemplate from "./Template";
 
+import 'chartiq/css/normalize.css';
+import 'chartiq/css/stx-chart.css';
+import 'chartiq/css/chartiq.css'
+
+import { getCustomConfig } from "./resources"; // ChartIQ library resources
+
 export { CIQ }
 
 /**
- * An example of a term structure chart.
+ * An example of a cross section chart for non time series data.
  *
- * @class TermStructure
+ * @class CrossSection
  * @export
- * @extends {React.Component}
- * @param {object} config Configuration used for the chart.
- * @param {object} resources Object of resources passed into configuration to be applied
- * @param {TermStructure~chartInitialized} chartInitialized Callback that fires when the chart is interactive
+ * @extends {React.Component} 
  */
 export default class TermStructure extends React.Component {
+	/**
+	 * @constructor
+	 * @param {object} [props] React props
+	 * @param {object} [props.config] Configuration used for the chart.
+	 * @param {object} [props.resources] Object of resources passed into configuration to be applied
+	 * @param {CrossSection~chartInitialized} [props.chartInitialized] Callback that fires when the chart is created
+	 */
 	constructor(props) {
 		super(props);
+		const { config, resources } = props;
+
 		this.container = React.createRef();
 
+		const configObj = getCustomConfig({ resources });
+		CIQ.extend(configObj, config);
+		this.config = configObj;
+
 		this.state = {
@@ -38,4 +56,4 @@ stx: null,
 		const container = this.container.current;
-		const { chartInitialized } = this.props
-		let { config } = this.props;
+		const { chartInitialized } = this.props;
+		const { config } = this;
 
@@ -72,5 +90,5 @@ window.setTimeout(() => {
 /**
- * @callback TermStructure~chartInitialized
+ * @callback CrossSection~chartInitialized
  * @param {CIQ.ChartEngine} chartEngine
  * @param {CIQ.UI.Context} uiContext
  */

src/CrossSection/index.js

@@ -1,26 +0,5 @@
-import React from "react";
-
-import { default as CrossSection, CIQ } from "./Chart";
+import { default as Chart, CIQ } from "./Chart";
 import { getConfig, getCustomConfig } from "./resources";
-import ChartPage from "./ChartPage";
+import ChartExample from "./ChartExample";
 
-/**
- * @name TermStructure
- * 
- * @export
- * @extends {React.Component}
- * @param {object} config Configuration used for the chart.
- * @param {object} resources Object of resources passed into configuration to be applied
- * @param {TermStructure~chartInitialized} chartInitialized Callback that fires when the chart is interactive
- * @return {TermStructure} 
- */
-export default function ({ chartInitialized, config, resources }) {
-	const configObj = getCustomConfig({ resources });
-	CIQ.extend(configObj, config);
-
-	return (
-		<CrossSection config={configObj} chartInitialized={chartInitialized} />
-	);
-}
-
-export { CIQ, getConfig, getCustomConfig, ChartPage }
+export { Chart as default, CIQ, getConfig, getCustomConfig, ChartExample }

src/index.js

@@ -1,5 +0,2 @@
-// Be sure to import base styles first so they don't override any styles for components!
-import "./styles/base-imports";
-
-import CoreChart from "./Core"
-export { CoreChart as default }
+import Chart from "./Chart"
+export { Chart as default }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

207

increased by107%

Worsened metrics

Total package byte prevSize

158287

decreased by-10.75%

Number of package files

45

decreased by-13.46%

Lines of code

3605

decreased by-16.61%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes