deltares / fews-web-oc-charts Goto Github PK

See https://github.com/Deltares/fews-wms-requests/blob/main/.github/workflows/npm-test.yml for similar action.

• add scroll zoom to svg
• emit zoom event with xScalesDomains and yScalesDomains
• add settings to zoom only on x or y axes
• add zoom only on x (or y) axis when cursor is above axis
• add pan

On vertical charts we also want correct mouseovers:

Adjust crossSectionSelect.ts such that it works for a chart with an array of data, such as a chartArea. For a chartArea, draw two circles, one at each end of the area, but only one tag with data. Other chart types might also have an array as data, but might require a different approach

When the axis is of type degree it should be capped at 360. It currently scales to 400.
https://rwsos.rws.nl/viewer/map/noordzee/meteo/location/L91?pd=-2%3B2

If valueField is an array, and not all of the selectors have (non-null) data, the datafield should still display correctly. For instance:

• Always append a unit (unless some of the datafields have different units.)
• Only append the hyphen if the next valueField will show anything (i.e. if the next valueField can find data).
• Apply the dx and dy of each valueField to the individual tspan

Maybe other things should be adjusted as well.

When the x-axis is a non time type (e.g. value) then the tooltip shows an invalid datetime text.

d3.bisect only accepts ascending arrays, fix it by doing it in reverse for descending ones.
See #79

All the visitors should have a zoom method which has a start point and end point as argument.

zoom(start, end)

Make compatible for use within the RWsOS viewer.

Application: Make a rose for current as well as for wind. However, the direction of current is opposite that of wind (both have the same value, but the 'arrow points in the opposite direction')

Change the line in the polar plot to an arrow/vector, or add something like a chartVector instead of chartLine

• single css file
• sass
• use dark and light classes

In some cases default are set with || where it would be better to ??.
Check and use ??.

When the axis options are changed (using setOptions), the Axis is not updated. For instance, of the axis position is set to 'top' initially, but changed to 'bottom' later, then the axis stays at the 'top' position. The setOptions correctly updates this.options, but the Axis / Chart is not updated.

When adding new data to a chart it is not always appropriate to animate the transition from new to old data.
Hence, we should add an option to disable the transition on a redraw.

toggleChartVisisbility => toggleChartVisibility

Hide the data point circle of the mouseOver:

• before pointer moves into chart
• for chart area's

Move the axis to a translated group and add the legend on top, bottom, left or right.

Create an svg group for all axis (not grid lines). Can have an influence on the css selectors.

D3 available color scales:

https://github.com/d3/d3-scale-chromatic

determineLabel is used in both crossSectionSelect.ts and mouseOver.ts, and is (nearly) identical. In addition, the label depends more on the type of chart than on the type of visitor. So move determineLabel to (each) chart. See also #43 (comment) for background.

npm crashes when running npm i because the project is using a deprecated version

When the axis is located a the top of the chart the label and unit should be moved.

You can add charts with the same id. They are grouped in the legend.
Sometime this is done for combining a chartMarker and chartLine which have the same data.
Now two labels are drawn.

ERROR in ./node_modules/@deltares/fews-web-oc-charts/lib/esm/Axis/axis.js 48:26-37
export 'default' (imported as 'd3') was not found in 'd3'

Add a serve.json file with CSP headers.

Inline script and style are not allowed. Separate examples in *.html, *.js and *.css files.

The bottom number in this mouseover label belongs to the right axis, but it is rounded as if it belongs to the left axis. It should be rounded similar to how the numbers on the axis are rounded.

At the moment we need CSP header due to the tooltip rendering html from string.
Content-Security-Policy: style-src 'unsafe-inline';

When a chart is closed, such that the path is no longer present, calling resize() on the axis gives an Error: transition xx not found for some charts. This does not happen for ChartLine, but does happen for (at least) ChartRange and ChartHistogram.

See https://github.com/Deltares/fews-wms-requests/blob/main/.github/workflows/npm-publish.yml for similar action.

Move the repos from the Vortech Gitlab https://gitlab.vortech.nl/deltares/wb-charts to here.
Change the name in package.json to "@deltares/fews-web-oc-charts".

Migrate issues if possbile.

When making an transition where rescaling is necessary it is better to use a transition from the old pixel coordinates to the new coordinates. This prevents strange animations outside the axis range.

• add zoom only on x (or y) axis when cursor is above axis
• add pan

Add option to mouseOver to pass an custom formatter.

See Deltares/fews-pi-requests#69 for more details how to add Ecmascript as build output and enable ES support in Jest.

The following steps are necessary.

• Add type=module in package.json, this will ensure the node treats als Javascript files as Ecmascript
• Convert .esltintrc.js to .eslintrc.cjs to ensure the node will treat it as Common JS (with require)
• Add a build:esm step in package.json to generate Ecmascript module "build:esm": "tsc", change the "tsconfig.json" file to output types to "declarationDir": "lib/types", and output "outDir": "lib/esm"
• Convert webpack.js to Ecmascript module (replace requre with import), change the entry for webpack to entry: './lib/esm/index.js', the ts-loader plugin is no longer required
• In package.json include the lib directory in the "files" : [ "dist/*", "lib/*" ] entry.
• Add a build:cjs step in package.json to generate Commonjs to "lib/esm" "build:cjs": "tsc --module commonjs --outDir lib/cjs"
• Change all imports to full path, (see below)
• Change the jest.config.js to jest.config.cjs and enable Ecmascript support for testing

    preset: 'ts-jest/presets/default-esm', // or other ESM presets
    moduleNameMapper: {
      '^(\\.{1,2}/.*)\\.js$': '$1',
    },
    transform: {
        '^.+\\.[tj]sx?$': ['ts-jest', { useESM: true } ]
    },

Fully specified imports

For Ecmascript it is required the all imports are specified as a full path.

So the import

import { TooltipAnchor, TooltipPosition } from '../Tooltip';

must be changed to

import { TooltipAnchor, TooltipPosition } from '../Tooltip/tooltip.js';

For the index.ts files change

export * from './axis'

to

export * from './axis.js

Even when working with Typescript the import statement should specify the .js extension.