Description

Our documentation provides a Typedoc page that is rendered using the default style: https://ods-charts.netlify.app/api/.

This issue suggests creating a custom Orange theme for this repository first. If reusable, we could then export it as a separate OSS project on its own if it can be useful for other Orange projects.

Reference: https://typedoc.org/guides/themes/

Building angular and angular-tour-of-heroes tests displays a Warning: depends on 'ods-charts'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application, which results in larger bundle sizes. Instead, it is recommended that you use ECMAScript modules in your entire application.

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Timeseries charts does not displayed axes

Reduced test cases

Refer to the last graph of the test/html/ test

Axes and horizontal lines should be displayed

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of ODS Charts are you using?

v0.1.0-alpha.1

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I made a very simple test graph using sample at https://github.com/Orange-OpenSource/ods-charts/tree/main/test/angular-ngx-echarts and angular 17.
I had to make a few adaptations for Angular 17 not using app.module.ts anymore.

Finally I blocked on this issue at build time :

Application bundle generation failed. [8.261 seconds]
✘ [ERROR] TS7016: Could not find a declaration file for module 'ods-charts'. '/builds/OrangeMoney/Retailer/pilotagedistri/business-server/proto/proto-elastic-iframe/node_modules/ods-charts/dist/ods-charts.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/ods-charts` if it exists or add a new declaration (.d.ts) file containing `declare module 'ods-charts';` [plugin angular-compiler]
    src/app/test-ods-charts/test-ods-charts.component.ts:4:27:
      4 │ import * as ODSCharts from 'ods-charts';
        ╵                            ~~~~~~~~~~~~

I solved it by going to folder node_modules/ods-charts and move all files in "dist" folder to parent folder. Command used was : mv dist/* .

It ran well after that... but only on my local computer. Is there an issue with the packaging of the library?

Reduced test cases

• use angular 17
• run ng new odsbug, cd odsbug
• run ng generate component chart
• add following lines in package.json :

    "echarts": "^5.4.3",
    "ngx-echarts": "^17.1.0",
    "ods-charts": "^0.1.0-alpha.2",

• run npm install
• add following lines in src/app/chart/chart.component.html

<div
  echarts
  [options]="options"
  [merge]="mergeOptions"
  [theme]="myTheme.theme"
  class="demo-chart"
  (chartInit)="onChartInit($event)"
></div>

• add following in src/app/chart/chart.component.ts

import { Component } from '@angular/core';
import { ECharts, EChartsOption } from 'echarts';
import { NgxEchartsModule } from 'ngx-echarts';
import * as ODSCharts from 'ods-charts';

@Component({
  selector: 'app-graph',
  standalone: true,
  imports: [NgxEchartsModule],
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.sass'],
})
export class ChartsComponent {
  public options: EChartsOption = {
    legend: {},
    tooltip: {},
    dataset: {
      // Provide a set of data.
      source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Lattte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1],
      ],
    },
    // Declare an x-axis (category axis).
    // The category map the first column in the dataset by default.
    xAxis: { type: 'category' },
    // Declare a y-axis (value axis).
    yAxis: {},
    // Declare several 'bar' series,
    // every series will auto-map to each column by default.
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
  };
  public myTheme: ODSCharts.ODSChartsTheme;

  constructor() {
    this.myTheme = ODSCharts.getThemeManager({
      mode: ODSCharts.ODSChartsMode.LIGHT,
      categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS,
      visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE,
      lineStyle: ODSCharts.ODSChartsLineStyle.SMOOTH,
    });
  }

  public onChartInit(ec: ECharts) {
    this.options = this.myTheme
      .setDataOptions(this.options)
      .externalizeLegends(ec, '#legend')
      .externalizePopover()
      .getChartOptions();
  }
}



What operating system(s) are you seeing the problem on?

macOS, Linux

What browser(s) are you seeing the problem on?

No response

What version of ODS Charts are you using?

1.0.0 alpha 2

Description

This issue is for the moment a reference for the colors to be used in ODS Charts. It will evolve to something more specific with actions later on.

• TODO: define actions
• TODO: extract names, colors, etc. from the screenshot to be copyable in this issue as real strings

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Improve documentation to give examples of the following feedback:

• How do I use a colour that is not in one of the colour palettes provided?
• How do you customise the content or part of the content of the popup or tooltip?
• More detail on how to use Apache Echart's internal popup or tooltip manager (with the ODS design)

Motivation and context

These requests for changes to the documentation are the result of questions from users of the library.

⚠️ This issue is on hold until more details are provided to start the development

Context

Boosted provides components for web developers whose the design is described in Orange Design System Design System Manager: https://system.design.orange.com

For the buttons for instance, at https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/0465a6, in the "Develop" tab, we can see the rendering of the buttons available in Boosted.

It's embedded here via a specific Storybook page: https://boosted.orange.com/storybook/?path=/docs/components-buttons--docs

Description

We'd like to do the same thing for ODS Charts. Zeroheight allows us to embed elements from Storybook, but also from whatever website as iframes. The idea here would be to reproduce the same examples provided in the DSM in some test/zeroheight/*.html independent pages and embed them into the DSM.

Description

This repository contains legal headers (or other files) containing the current year.

The idea in this issue would be to create a JS script allowing to update these years automatically.

Description

As it's often done for JavaScript libraries, let's provide a minified version of the library too named ods-charts.min.js.

Description

Everything's in the title: when running npm run dev locally in test/vue directory, the following warning message is displayed:

> [email protected] dev
> vite

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

This issue aims to analyze what's the problem and to fix it if possible.

Description

Our documentation doesn't have any favicon files for now.

To close this issue, a favicon file (or files) should be added to all pages of the documentation.

There could be extra things to do for https://ods-charts.netlify.app/api/.

Don't forget to add the favicon file (or files) to our https://github.com/Orange-OpenSource/ods-charts/blob/main/NOTICE.txt.

Sub-tasks

• Add favicons images in the repository and mention them in a NOTICE.txt
• Add favicons to the documentation
• Add favicons to the /api (we might need something like https://www.npmjs.com/package/typedoc-plugin-extras as an extra plugin to do that)

Description

When running npm run build, dist/ods-charts.js is generated.
Due to the legal headers in all TypeScript files, dist/ods-charts.js contains several times the following header within the file:

//
// Software Name: Orange Design System Charts
// SPDX-FileCopyrightText: Copyright (c) 2023 Orange SA
// SPDX-License-Identifier: MIT
//
// This software is distributed under the MIT license.
//

Expected: only one legal header should be displayed at the top of dist/ods-charts.js when generated.

Description

Dependabot is configured to group the bumps of dependencies. It works well but is not really handy for bumping dependencies of our 2 Angular tests projects:

• /test/angular-tour-of-heroes
• /test/angular-ngx-echarts

Indeed, here's an example of grouping done by Dependabot:

• https://github.com/Orange-OpenSource/ods-charts/pull/48/files
• https://github.com/Orange-OpenSource/ods-charts/pull/47/files

The problem here is that both modifications are needed to bump the Angular version in this project (the deps and the dev deps).

This issue aims to find a way to group (probably needed only for Angular) Angular dependencies in one independent Dependabot PR.

Description

It is a good practice to credit the authors of a product used when under Apache 2 license.
Since ODS Charts relies on Apache ECharts, it'd be helpful to add to our documentation some information about how to credit Apache ECharts for our users in their apps.

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

If the tooltip or popover to be displayed is on the left or right of the graph, it may extend beyond the page and be partially hidden.

Reduced test cases

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

No response

What version of ODS Charts are you using?

v0.1.0-alpha.2

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

When representing data on a bar chart, it is possible to want to represent this data with a different colour depending on a condition on the value. For example, green for a target achieved, red otherwise.
You would then need to be able to have

• both colours in the legend
• the colour associated with the current value in the tooltop or popover.

Motivation and context

This need arises from a use case for the library. A workaround was to use two stacked series to represent respectively objectives achieved in green and objectives not achieved in red. Both colours are displayed in the legend. But the tooltip on a bar also displays both colours, whereas only the green or red colour is desirable depending on whether or not the objective has been achieved for the period.
NB: the use case studied also had a 3rd colour for this same series, grey, with a bar 100% high, representing data that was not available for the period.
Exemple in attached file index.zip