ods-charts - npm Package Compare versions

Comparing version 0.1.0-alpha.8 to 0.1.0-alpha.9

dist/src/ods-charts.d.ts

@@ -15,4 +15,5 @@ /**
 export * from './theme/ods-chart-theme';
+export * from './theme/ODS.project';
 export * from './theme/css-themes/css-themes';
 export * from './theme/popover/ods-chart-popover-definitions';
 export declare const getThemeManager: typeof ODSChartsTheme.getThemeManager;

dist/src/theme/ods-chart-theme.d.ts

@@ -157,3 +157,3 @@ import { EChartsProject } from './ODS.project';
      * The method takes the theme configuration as a parameter {@link ODSChartsThemeOptions}.
-     * @param options: default option used to generate the theme
+     * @param options default option used to generate the theme
      * @returns the theme manager
@@ -247,5 +247,5 @@ */
      * optionally you can use this call to set dataOptions
-     * @returns the Apache Echarts options
+     * @returns the Apache ECharts options
      */
     getChartOptions(dataOptions?: any): any;
 }

dist/src/theme/ODS.project.d.ts

@@ -0,1 +1,4 @@
+/**
+ * Echarts theme options
+ */
 export interface EChartsProject {
@@ -2,0 +5,0 @@ color: string[];

dist/src/theme/popover/ods-chart-popover-definitions.d.ts

@@ -28,11 +28,61 @@ import { ODSChartsCSSThemesNames } from '../css-themes/css-themes';
 }
+/**
+ * {@link ODSChartsPopoverDefinition} defines the interface of the manager of externalized
+ * popover or tooltip.
+ *
+ * {@link ODSChartsPopoverManagers} gives 3 default {@link ODSChartsPopoverDefinition}
+ * managers.
+ *
+ * You probably need to use one of those.
+ *
+ * But even if you use one of those, you may specialize it with specific(s)
+ * implementation(s) with one of the {@link ODSChartsPopoverDefinition} method(s).
+ *
+ * For example, you may specify the content of the tooltip:
+ * ```
+ *                 themeManager.externalizePopover(undefined, {
+ *                  ...ODSCharts.ODSChartsPopoverManagers.NONE,
+ *                  getPopupContent: (tooltipElements) => {
+ *                    return 'This is my HTML code that may content <a href="https://github.com/Orange-OpenSource/ods-charts">a link</a>';
+ *                  },
+ *                });
+ * ```
+ * or if you want to use Boosted 5 tooltip renderer:
+ * ```
+ *                 themeManager.externalizePopover(undefined, {
+ *                  ...ODSCharts.ODSChartsPopoverManagers.BOOSTED5,
+ *                  getPopupContent: (tooltipElements) => {
+ *                    return 'This is my HTML code that may content <a href="https://github.com/Orange-OpenSource/ods-charts">a link</a>';
+ *                  },
+ *                });
+ * ```
+ */
 export declare class ODSChartsPopoverDefinition {
-    getOrCreatePopupInstance?: (selector: string, title: string, htmlContent: string) => ODSChartsPopoverManager;
-    tooltipDelay?: number;
+    /**
+     * getPopupTitle() may be specify to change the html code of the popup/tooltip title
+     */
     getPopupTitle?: (axisValue: string, axisValueLabel?: string, name?: string) => string;
+    /**
+     * getPopupTitle() may be specify to change the html code of all the popup/tooltip content
+     */
     getPopupContent?: (tooltipElements: ODSChartsPopoverItem[]) => string;
+    /**
+     * getPopupContentLine() may be specify to change the html code of one line of the popup/tooltip
+     */
     getPopupContentLine?: (tooltipElement: ODSChartsPopoverItem) => string;
+    /**
+     * getPopupContentValue() may be specify to change the html code of value displayed in the popup/tooltip
+     */
     getPopupContentValue?: (tooltipElement: ODSChartsPopoverItem) => string;
+    /**
+     * getPopupTemplate() may be specify to replace a specific template for the  popup/tooltip to replace the default one
+     */
     getPopupTemplate?: (categoryLabel: string, tooltipElements: ODSChartsPopoverItem[]) => string;
 }
+export declare abstract class ODSChartsPopoverDefinitionWithRenderer extends ODSChartsPopoverDefinition {
+    abstract tooltipDelay: number;
+    abstract tooltipMarging: number;
+    abstract getOrCreatePopupInstance: (selector: string, title: string, htmlContent: string, enterable: boolean) => ODSChartsPopoverManager | undefined;
+    protected testIfMouseIsOverTooltip(previousPopover: ODSChartsPopoverManager): boolean;
+}
 export declare enum ODSChartsPopoverAxisPointer {
@@ -39,0 +89,0 @@ none = "none",

dist/src/theme/popover/ods-chart-popover.d.ts

@@ -10,2 +10,3 @@ import { ODSChartsCSSThemeDefinition } from '../css-themes/css-themes';
     private tooltipStyle;
+    private enterable;
     private constructor();
@@ -12,0 +13,0 @@ static addPopoverManagement(popoverDefinition: ODSChartsPopoverDefinition, popoverConfig: ODSChartsPopoverConfig): ODSChartsPopover;

dist/src/theme/resize/ods-chart-resize.d.ts

@@ -6,2 +6,3 @@ import { type ECharts } from 'echarts';
     private static sizeListeners;
+    private observer;
     private constructor();
@@ -8,0 +9,0 @@ static addResizeManagement(echart: ECharts, chartId: string): ODSChartsResize;

package.json

 {
   "name": "ods-charts",
   "description": "ODS Charts is based on Apache ECharts and provides Orange charts components.",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "author": "",
@@ -18,3 +18,3 @@ "contributors": [],
     "prettier:check": "prettier --check .",
-    "prettier:update": "prettier --write .",
+    "prettier:format": "prettier --write .",
     "release": "npm pack && npm publish",
@@ -32,4 +32,4 @@ "serve": "npm run typedoc && serve .",
     "echarts": "^5.5.0",
-    "prettier": "^3.2.5",
-    "serve": "^14.2.2",
+    "prettier": "^3.3.2",
+    "serve": "^14.2.3",
     "ts-loader": "^9.5.1",
@@ -36,0 +36,0 @@ "typedoc": "^0.25.13",

README.md

@@ -25,7 +25,53 @@ <h1 align="center">Orange Design System Charts</h1>
 
-Several quick start options are available:
+Start by installing ODS Charts library:
 
-- Clone the repo: `git clone https://github.com/Orange-OpenSource/ods-charts.git`
-- Install with [npm](https://www.npmjs.com/): `npm install ods-charts`
+- Install with [npm](https://www.npmjs.com/): `npm install ods-charts`, and use it in your JavaScript files: `import * as ODSCharts from 'ods-charts';`
+- Or use the CDN version of the library: `https://cdn.jsdelivr.net/npm/ods-charts@latest` (not recommended for eco-design reasons, useful for prototyping).
 
+The ODS Charts library is to be used with Apache ECharts to create charts that adhere to the Orange Design System guidelines.
+
+So, install Apache ECharts library:
+
+- Install with [npm](https://www.npmjs.com/): `npm install echarts`, and use it in your JavaScript files: `import * as echarts from 'echarts';`
+- Or use the CDN version of the library: `https://cdn.jsdelivr.net/npm/echarts@latest` (not recommended for eco-design reasons, useful for prototyping).
+
+It has been designed to be minimally intrusive and not to interfere with the use of the Apache ECharts library. The Apache ECharts documentation remains the reference for configuring charts.
+
+For instance, an Apache ECharts user can initialize a chart using code like this:
+
+```javascript
+var div = document.getElementById('barLine_chart');
+var myChart = echarts.init(div, undefined, {
+  renderer: 'svg', // SVG is recommended
+});
+// display the chart.
+myChart.setOption(dataOptions);
+```
+
+Adding the theme managed by ODS Charts will then consist of doing:
+
+```javascript
+// build the theme
+var themeManager = ODSCharts.getThemeManager({
+  // options can be used for configuration
+});
+
+// register this theme to echarts
+echarts.registerTheme(themeManager.name, themeManager.theme);
+
+var div = document.getElementById('barLine_chart');
+var myChart = echarts.init(
+  div,
+  themeManager.name, // initialize the chart with the generated theme
+  {
+    renderer: 'svg', // SVG rendered is recommended
+  }
+);
+
+// enrich data options to complete implementation of the Orange Design System.
+myChart.setOption(themeManager.getChartOptions(dataOptions));
+```
+
+The `themeManager` returned by `getThemeManager()` can be used to add other features supported by the ODS Charts library.
+
 Read the [documentation](https://ods-charts.netlify.app/) for information on the library content and examples.
@@ -32,0 +78,0 @@

No alert changes

Improved metrics

Lines of code

4015

increased by4.99%

Number of lines in readme file

102

increased by82.14%

Worsened metrics

Total package byte prevSize

330946

decreased by-6.63%

Number of package files

43

decreased by-2.27%

No dependency changes