Feature - New set of color palette added

[ShubhamShakyawal]

What kind of change does this PR introduce?
Feature

What is the current behavior?
Currently, there is no color palette available for colorMap in Options.

What is the new behavior (if this is a feature change)?
Yes, It is a feature where users can choose amongst the 12 available color palettes.

Issue related to this PR
#198

• The changes have been discussed in an issue and the approach has been approved.

• issue link: provide a set of color palettes #198

Other information:

This PR creates a new file named palette.ts in src/lib/.
Users can choose amongst the 12 available color palette options.

How to use.

import { race, palette } from 'racing-bars';

const options = {
    colorMap: palette.COLORBLIND; // one the color palette's name
};

race('/data.json', '#race', options);

List of available color palettes.

DEEP6 = ["#4C72B0", "#55A868", "#C44E52", "#8172B3", "#CCB974", "#64B5CD"];
MUTED = ["#4878D0", "#EE854A", "#6ACC64", "#D65F5F", "#956CB4", "#8C613C", "#DC7EC0", "#797979", "#D5BB67", "#82C6E2"];
MUTED6 = ["#4878D0", "#6ACC64", "#D65F5F", "#956CB4", "#D5BB67", "#82C6E2"];
PASTEL = ["#A1C9F4", "#FFB482", "#8DE5A1", "#FF9F9B", "#D0BBFF", "#DEBB9B", "#FAB0E4", "#CFCFCF", "#FFFEA3", "#B9F2F0"];
PASTEL6 = ["#A1C9F4", "#8DE5A1", "#FF9F9B", "#D0BBFF", "#FFFEA3", "#B9F2F0"];
BRIGHT = ["#023EFF", "#FF7C00", "#1AC938", "#E8000B", "#8B2BE2", "#9F4800", "#F14CC1", "#A3A3A3", "#FFC400", "#00D7FF"];
BRIGHT6 = ["#023EFF", "#1AC938", "#E8000B", "#8B2BE2", "#FFC400", "#00D7FF"];
DARK = ["#001C7F", "#B1400D", "#12711C", "#8C0800", "#591E71", "#592F0D", "#A23582", "#3C3C3C", "#B8850A", "#006374"];
DARK6 = ["#001C7F", "#12711C", "#8C0800", "#591E71", "#B8850A", "#006374"];
COLORBLIND = ["#0173B2", "#DE8F05", "#029E73", "#D55E00", "#CC78BC", "#CA9161", "#FBAFE4", "#949494", "#ECE133", "#56B4E9"];
COLORBLIND6 = ["#0173B2", "#029E73", "#D55E00", "#CC78BC", "#ECE133", "#56B4E9"];```

[netlify]

✅ Deploy Preview for racingbars ready!

Name	Link
🔨 Latest commit	396cd27
🔍 Latest deploy log	https://app.netlify.com/sites/racingbars/deploys/6701707d0dbde400089898c8
😎 Deploy Preview	https://deploy-preview-206--racingbars.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[hatemhosny]

Thank you @ShubhamShakyawal

I prefer not to expose color palettes in the external API of the library as one of the main exports.

What I suggest:

• Currently the colorMap option accepts either an array of colors or an object that maps bar names to colors. If the user supplies a string we assume it is a palette name.
• Type safety can be achieved as follows:

export const palettes = {
  deep6,
  // ...
} as const;

export type Palette = keyof typeof palettes;

• change the type of colorMap option to be:

  colorMap: { [key: string]: string } | string[] | Palette;

• move palettes.ts to src/lib/options
• We can then edit validation to reflect this change.

Does that make sense?
Please let me know what you think.

[ShubhamShakyawal]

@hatemhosny

All the necessary changes are being made as you mentioned. Please consider checking it. If there is anything I can do, or if changes are required, please let me know.

Palette set is used to validate in constant time in validateColorMap().

[github-actions]

Preview in LiveCodes

Latest commit: 396cd27
Last updated: Oct 5, 2024 4:59pm (UTC)

Playground	Link
JavaScript (ESM)	https://livecodes.io?x=code/N4IgLglmA2CmIC4QCkCGA3...
JavaScript (UMD)	https://livecodes.io?x=code/N4IgLglmA2CmIC4QCkCGA3...
React	https://livecodes.io?x=code/N4IgLglmA2CmIC4QCVYEMD...
Svelte	https://livecodes.io?x=code/N4IgLglmA2CmIC4QGUButp...
TypeScript	https://livecodes.io?x=code/N4IgLglmA2CmIC4QBUCeAH...
Vue	https://livecodes.io?x=code/N4IgLglmA2CmIC4QDUCu8A...

---

See documentations for usage instructions.

[hatemhosny]

Thank you @ShubhamShakyawal

I have added some comments. You can find them in the code review.

In addition:

To load the selected color palette, we need to replace this with:

      const colorMap = Array.isArray(options.colorMap)
        ? [...options.colorMap].map(String)
        : typeof options.colorMap === 'object'
          ? { ...options.colorMap }
          : options.colorMap && options.colorMap in palettes
            ? palettes[options.colorMap]
            : state.colorMap;

Also, please run npm run fix before committing to fix failing formatting check.

Thank you.

[ShubhamShakyawal]

@hatemhosny I have made changes to what you have mentioned.

On npm run test I'm getting this error.

ERROR: "lint:prettier" exited with 1.
ERROR: "test:lint" exited with 1.

After npm run fix 190 files are added and shown in the git file changes. Along with that following error is shown.

(node:19440) [stylelint:005] DeprecationWarning: `context.fix` is being deprecated.
Please pass a `fix` callback to the `report` utility of "@stylistic/declaration-bang-space-after" instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:19440) [stylelint:005] DeprecationWarning: `context.fix` is being deprecated.
Please pass a `fix` callback to the `report` utility of "@stylistic/declaration-bang-space-before" instead.

[hatemhosny]

After npm run fix 190 files are added and shown in the git file changes.

Please only add the files you have changed.

Along with that following error is shown.

This is only a warning. It should not cause the check to fail. This should go when we upgrade dependencies.
Thank you for reporting.

[ShubhamShakyawal]

@hatemhosny

The changes you mentioned have been made, but the build was not successful. Please look into this matter.

[hatemhosny]

The changes you mentioned have been made, but the build was not successful. Please look into this matter.

Thank you @ShubhamShakyawal , I will have a look.

You may also want to include palettes from this project: https://github.com/pratiman-91/colormaps

[hatemhosny]

The changes you mentioned have been made, but the build was not successful. Please look into this matter.

I have fixed linting and formatting errors in these commits:
b6d08b0 - 14606a5

You may also want to include palettes from this project: pratiman-91/colormaps

We can just use a few of these palettes, not all of them.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[ShubhamShakyawal]

@hatemhosny

I have added some more palettes.

[hatemhosny]

Thank you @ShubhamShakyawal
That's nice.

I think it would be better to sort palettes alphabetically.

We can now add:

• tests
• docs: in options and gallery

It would be nice if we have somewhere in docs (may be in Gallery or Guides) a preview for the color maps similar to this or that.