Charts: Add chart color set for teams to pull in colors for their charts.

[julio8a]

Background about this PR:

• Adds a buildsetup. To run a build do npm run build in a terminal. This will generate the JS & JSON files from the TS files and output them into the dist folder.

• Make sure to run npm install before running the build the first time.

• Adding chart colors to calcite-colors started from a conversation on Teams, here: https://teams.microsoft.com/l/message/19:fd15b51dacd24e70895ec1218a54ae06@thread.skype/1591830666682?tenantId=aee6e3c9-711e-4c7c-bd27-04f2307db20d&groupId=56fae21a-9407-4943-859f-a9bfcf0bbad3&parentMessageId=1591830666682&teamName=Calcite%20Design%20System&channelName=Calcite%20Components&createdTime=1591830666682

  Summary: The goal is to have a common place for teams to pull in colors for their charts. At the moment folks pull colors from whichever library they use, AM Charts, etc. Or leverage colors from another app.

The section below focuses on two types of color sets: Quantitative (gradient ramps) and Qualitative (Categorical)

• When talking about charting colors, the ideal situation was to build those chart colors with calcite-colors. However, the color ramps recreated with calcite-colors didn't meet the needs as some middle values in the ramp were stronger than higher or lower values, for example: On the Calcite column, you'll notice that the third value from the top stands out more than the first value, which in color ramps should NOT be the case, it should be a smooth equal value of gradation to emphasis the importance. This same issue was present in other ramps recreated with calcite-colors.

  Because of this, we should stick with the predefined color ramps used in ArcGIS Dashboards. Modifying the calcite-colors to meet the criteria of color ramps would be too disruptive to the current application or calcite-colors usage in UI and other media.

• However, the categorical color values (image below) only need to have good contrast between their siblings, for accessibility purposes. Even though there is not a 100% 1-to-1 match in calcite-colors it's close enough to keep the concept. From conversations with Andy Skinner and Mark Harrower, they were okay with categorical themes following calcite-colors.

• Currently, in this PR, I just copied over all the colors from the ArcGIS Dashboards, but I can convert the categorical values only to calcite-colors.

It's important to note, that these color values are for charts only and should not be leveraged for UI design, which we will document

@driskull, I just copied over the dashboard file and I think I created the json file correctly 🤞 (designer here). I'm not sure if we need the .ts or scss or if anything needs to get restructured/reformatted. Really open to any feedback as this is really rough state PR.

Please let me know your thoughts and feedback.

CC'ing folks that were involved in a meeting back on July 8th. @mitc7862, @bstifle, @subgan82, @rmstinson, @pemberdom

53

[kyle-03674]

@julio8a I see what you're saying and this makes sense to me.
One detail on the categorical ramps...If we use the vibrant set I think this one, "vibrant-rainbow," could get closer to the original. ... I'm guessing your screenshot was more a Proof of Concept.

[julio8a]

@kyle-03674, I think I just had an old set of vibrant colors where the VR didn't exist? or I must have overlooked those. Yes, Those are much more fitting.

[bstifle]

Dig it! this sounds like a good compromise

[driskull]

@jcfranco could you review this and let me know what you think? I think it can be simplified a bit but wasn't sure exactly how.

I think in general we want the ability to get access to chart colors via JSON/TS/JS. Does that sound right?

[driskull]

@jcfranco can you review this?

[jcfranco]

What's the priority/timeframe for this? Also, can you update the PR title?

[driskull]

What's the priority/timeframe for this? Also, can you update the PR title?

I would say medium priority so we can begin using these colors via an NPM dependency in the JSAPI for 4.18.

The goal is for consistent chart colors throughout our apps and APIs.

PR title updated.

[jcfranco]

@driskull Thanks! I'll try to get the review done by end of today. 👀

[driskull]

Thanks. Let me know if you have ideas for how we can better automate or deliver this to different projects.

[driskull]

@julio8a this good to merge? anyone you think should review?

[julio8a]

@paulcpederson, if you have time, can you give this a quick review before the merge?

[bstifle]

@julio8a were you able to make the updates kyle suggested?

[julio8a]

Thanks for the reminder @bstifle. Just pushed up the changes for those two colors.

[paulcpederson]

Because you moved the build files to dist (if I'm reading this code correctly), you'll need to also update all the documentation to make sure it points to the correct paths.

A note in the readme for these color palettes would be good.

Also, since we're moving things around, I think that technically makes this a breaking change and we should go to 3.0.0

[driskull]

@paulcpederson let me know if that's good now.

[paulcpederson]

Thanks @driskull 👍

[driskull]

Can someone do a release to npm for this?

[paulcpederson]

already did 😉