Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add conditional formatting based on another column and red negatives #1902

Merged
merged 4 commits into from Apr 18, 2024

Conversation

hughess
Copy link
Member

@hughess hughess commented Apr 16, 2024

Description

3 improvements to DataTable:

  1. Use another column to define a color scale scaleColumn
  2. Use another column to define value formatting fmtColumn
  3. Set negative values to show as red redNegatives

Custom Column Conditional Formatting

CleanShot 2024-04-16 at 15 55 55@2x

Red Negative Values

Use redNegatives=true in the Column component to set negative values to show as red.

CleanShot 2024-04-16 at 19 30 03@2x

Checklist

  • For UI or styling changes, I have added a screenshot or gif showing before & after
  • I have added a changeset
  • I have added to the docs where applicable

Copy link

changeset-bot bot commented Apr 16, 2024

🦋 Changeset detected

Latest commit: ace1352

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@evidence-dev/core-components Patch
@evidence-dev/evidence Patch
my-evidence-project Patch
@evidence-dev/components Patch
evidence-test-environment Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented Apr 16, 2024

Deploy Preview for evidence-development-workspace ready!

Name Link
🔨 Latest commit ace1352
🔍 Latest deploy log https://app.netlify.com/sites/evidence-development-workspace/deploys/662160ca73b51a0008addef2
😎 Deploy Preview https://deploy-preview-1902--evidence-development-workspace.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Apr 16, 2024

Deploy Preview for next-docs-evidence ready!

Name Link
🔨 Latest commit ace1352
🔍 Latest deploy log https://app.netlify.com/sites/next-docs-evidence/deploys/662160ca263c88000813cdec
😎 Deploy Preview https://deploy-preview-1902--next-docs-evidence.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Comment on lines 56 to +98
{@const useCol = safeExtractColumn(column, columnSummary)}
{@const column_min = column.colorMin ?? useCol.columnUnitSummary.min}
{@const column_max = column.colorMax ?? useCol.columnUnitSummary.max}
{@const scaleCol = column.scaleColumn
? columnSummary.find((d) => d.id === column.scaleColumn)
: useCol}
{@const column_min = column.colorMin ?? scaleCol.columnUnitSummary.min}
{@const column_max = column.colorMax ?? scaleCol.columnUnitSummary.max}
{@const is_nonzero =
column_max - column_min !== 0 && !isNaN(column_max) && !isNaN(column_min)}
{@const column_format = column.fmt
? getFormatObjectFromString(column.fmt, useCol.format?.valueType)
: useCol.format}
: column.fmtColumn
? getFormatObjectFromString(row[column.fmtColumn], useCol.format?.valuetype)
: useCol.format}
{@const color_domain =
column.colorBreakpoints ??
(column.colorMid ? [column_min, column.colorMid, column_max] : [column_min, column_max])}
{@const color_scale = column.colorPalette
? chroma.scale(column.colorPalette).domain(color_domain)
? chroma.scale(column.colorPalette).domain(color_domain).nodata('white')
: ''}
{@const cell_color =
column.contentType === 'colorscale' && is_nonzero && column.colorPalette
? column.scaleColumn
? color_scale(row[column.scaleColumn]).hex()
: color_scale(row[column.id]).hex()
: ''}
{@const font_color = column.redNegatives
? row[column.id] < 0
? 'rgb(220 38 38)'
: ''
: column.contentType === 'colorscale' && is_nonzero && column.colorPalette
? chroma.contrast(cell_color, uiColours.grey999) <
chroma.contrast(cell_color, 'white') + 0.5
? 'white'
: uiColours.grey999
: ''}
{@const bottom_border =
i !== displayedData.length - 1 &&
rowLines &&
column.contentType === 'colorscale' &&
is_nonzero &&
column.colorPalette
? `1px solid ${chroma(cell_color).darken(0.5)}`
: ''}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not addressable in this PR, but this really is starting to smell like it needs to be it's own component, rather than all of these {@const}s

@hughess hughess merged commit a0421ce into next Apr 18, 2024
9 checks passed
@hughess hughess deleted the col-cond-fmt branch April 18, 2024 21:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants