Updating examples for dc-v5

dc-js / dc.js

Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js

Apache License 2.0

7.41k stars 1.81k forks source link

Updating examples for dc-v5 #1850

Closed kum-deepak closed 2 years ago

kum-deepak commented 2 years ago

Working on updating the examples. I am keeping the following structure:

Using ES6 syntax as far as possible.
For charts, first data provider, followed by conf and then other methods.
Prettier for formatting.
eslint clean

Notes for myself:

First, make the Google Analytics block to be ignored by eslint.
Ensure it is clean as per eslint.
Run prettier.
Make changes.
Run prettier.
Check eslint

kum-deepak commented 2 years ago

The codemods definitely make sense. Let me take a stab at that. I have not used any such tool so far. I understand the concept though. Considering JSCodeShift is not optimal, do you have any tool suggestions?

I see the following outline:

identify a chart object - typically the creation and configuration are not likely to be together.
on that chart object, typically, chained function calls will be there.
out of the chained calls, some will move to .configurae and some to dataProvider.
occasionally sematic of method change, like .colors, .point etc.
the older function-based creation will need changing to constructor-based.
I think whatever is covered in the current compat files can be automated.
asking the user to make the code lint-clean before using the automated upgrade may be useful.

gordonwoodhull commented 2 years ago

It looks like JSCodeShift is the standard here, and it should work.

I was hoping for something that had a domain specific language for doing the transformations, to make them easier to read, but I think we should use the standard.

As I understand it, these tools should easily cover the kinds of changes you describe.

gordonwoodhull commented 2 years ago

Thanks @kum-deepak!

Have you checked in the JSCodeShift codemods? I am hoping that they will help explain the big changes in the API.

kum-deepak commented 2 years ago

Well, the codemods are ready - https://github.com/dc-js/dc-codemods. The code is configuration-driven. Please have a look. Your feedback will be useful. I have also added a wrapper that allows it to work for HTML files (only the javascript script blocks).

Currently, it does quite a lot. It renames all the functions, converts calls to constructors, adds chartGroup concepts, creates configuration blocks, layers, points, and dataProvider.

Quite a few examples worked with just automated conversion - see commit https://github.com/dc-js/dc.js/pull/1850/commits/243a4813ab0dc5011184af3a6a2618ec219ded5e

In all other examples, the commit message lists key changes needed to make it work. These will help in completing the migration guide.

ScatterPlots are currently showing issues. I will investigate those. Interestingly these work with dc-compat.

The example switching-time-intervals.html uses many concepts apart from its core purpose. I will trim it to just its core purpose.

kum-deepak commented 2 years ago

Thanks @kum-deepak!

Have you checked in the JSCodeShift codemods? I am hoping that they will help explain the big changes in the API.

Wow, your comment crossed as I was posting mine. Please check my comment above.

gordonwoodhull commented 2 years ago

Oh cool, I missed the new repo. Will check it out!

kum-deepak commented 2 years ago

Trimmed switching-time-intervals to do exactly as the title says.

kum-deepak commented 2 years ago

In ScatterPlot, we need an explicit default valueAccessor - d => d.key[1]. The compat code flow was attaching it. With this modification in codemod, examples needed very little change.

kum-deepak commented 2 years ago

Other than transitions and resize folders, all other examples have been upgraded.

I am considering changing the default sizing mechanism, #1853. If that works it will obviate resize tests.

I am merging this PR now. Will work on the Upgrade guide.