terezka / elm-charts

Create SVG charts in Elm.
https://www.elm-charts.org
BSD 3-Clause "New" or "Revised" License
698 stars 67 forks source link

Fix default colors for stacked bars #118

Open Enkidatron opened 1 year ago

Enkidatron commented 1 year ago

This addresses #101 .

Summary

Within stacked bar charts, each stack was being reversed, which resulted in the colors being reversed in that stack if the default colors were used. I removed the List.reverse and updated the downstream code to work correctly with the adjusted indexes.

Research Details

I determined that the List.reverse was being used in order to make each bar have the "correct" sectionIndex in the toBarItem function. Thus, if the toBarItem function could be updated to use the original indexes (instead of the reversed indexes), then the List.reverse could be removed and the colors would be automatically fixed.

Q: What does toBarItem use sectionIndex for? A: toBarItem uses sectionIndex in three ways:

  1. It is used to determine if this item in the stack is the top/bottom item, and thus should have top/bottom rounding applied.
  2. It is passed into section.extra to determine the final visual attributes to apply to the item.
  3. It is recorded in the config.tooltipInfo in the I.Rendered value that this function returns.

Usage 1 is safe to update as long as we simply swap which condition we consider to be the "top" and which the "bottom". I have done this and changed the helper values to be named isTop/isBottom instead of isFirst/isLast.

For usages 2 and 3, it does not actually matter what the index is for each item, as long as these two usages match. To support this claim:

First sub-claim: Usage 2 will not cause any problems as long as usage 3 is in sync.

Second sub-claim: Usage 3 will not cause any problems as long as usage 2 is in sync.

In conclusion, the index that was being modified by the List.reverse call (stackIndex) was being used in three ways. One required us to make a small local change, which was made. The other two do not require any changes. Once the List.reverse is removed, the default colors start working automatically.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
elm-charts ✅ Ready (Inspect) Visit Preview Aug 24, 2022 at 10:02PM (UTC)