feat(legends): fix continuous color scale legend when the direction is column

Author: plouc

packages/heatmap/src/HeatMapCanvas.tsx

@@ -14,6 +14,7 @@ import {
     HeatMapCommonProps,
     HeatMapDatum,
     CellShape,
+    CustomLayerProps,
 } from './types'
 
 type InnerNetworkCanvasProps<Datum extends HeatMapDatum, ExtraProps extends object> = Omit<
@@ -56,9 +57,6 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
     legends = canvasDefaultProps.legends,
     annotations = canvasDefaultProps.annotations as HeatMapCommonProps<Datum>['annotations'],
     isInteractive = canvasDefaultProps.isInteractive,
-    // onMouseEnter,
-    // onMouseMove,
-    // onMouseLeave,
     onClick,
     hoverTarget = canvasDefaultProps.hoverTarget,
     tooltip = canvasDefaultProps.tooltip as HeatMapCommonProps<Datum>['tooltip'],
@@ -115,6 +113,12 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
 
     const theme = useTheme()
 
+    const customLayerProps: CustomLayerProps<Datum> = {
+        cells,
+        activeCell,
+        setActiveCell,
+    }
+
     useEffect(() => {
         if (canvasEl.current === null) return
 
@@ -185,6 +189,8 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
                     annotations: computedAnnotations,
                     theme,
                 })
+            } else if (typeof layer === 'function') {
+                layer(ctx, customLayerProps)
             }
         })
     }, [
@@ -196,6 +202,7 @@ const InnerHeatMapCanvas = <Datum extends HeatMapDatum, ExtraProps extends objec
         innerHeight,
         margin,
         layers,
+        customLayerProps,
         cells,
         renderCell,
         enableGridX,

packages/legends/src/compute.ts

@@ -208,7 +208,6 @@ export const computeItemLayout = ({
 }
 
 export const computeContinuousColorsLegend = ({
-    // id,
     scale,
     ticks,
     length = continuousColorsLegendDefaults.length,
@@ -223,7 +222,8 @@ export const computeContinuousColorsLegend = ({
     titleAlign = continuousColorsLegendDefaults.titleAlign,
     titleOffset = continuousColorsLegendDefaults.titleOffset,
 }: ContinuousColorsLegendProps) => {
-    const domain = scale.domain()
+    // left to right for `row`, bottom to top for `column`
+    const domain = direction === 'column' ? [...scale.domain()].reverse() : scale.domain()
 
     const positionScale = scaleLinear().domain(domain)
     if (domain.length === 2) {
@@ -263,9 +263,9 @@ export const computeContinuousColorsLegend = ({
     let height: number
 
     const gradientX1 = 0
-    const gradientY1 = 0
+    let gradientY1 = 0
     let gradientX2 = 0
-    let gradientY2 = 0
+    const gradientY2 = 0
 
     let titleX: number
     let titleY: number
@@ -333,7 +333,7 @@ export const computeContinuousColorsLegend = ({
         width = thickness
         height = length
 
-        gradientY2 = 1
+        gradientY1 = 1
 
         let x1: number
         let x2: number

website/src/components/components/explorer/ComponentsGridItem.tsx

@@ -12,7 +12,7 @@ export const ComponentsGridItem = memo(({ name, id, flavors }: ChartNavData) =>
     }, [])
 
     return (
-        <Container to={`/${id}/`}>
+        <Container>
             <Icon className={`sprite-icons-${id}-${theme.id}-colored`} />
             <Header>
                 <Name>{name}</Name>
@@ -39,8 +39,7 @@ export const ComponentsGridItem = memo(({ name, id, flavors }: ChartNavData) =>
     )
 })
 
-const Container = styled(Link)`
-    text-decoration: none;
+const Container = styled.div`
     background-color: ${({ theme }) => theme.colors.cardBackground};
     border-radius: 2px;
     padding: 12px;

website/src/pages/heatmap/canvas.tsx

@@ -77,9 +77,9 @@ const initialProperties: CanvasUnmappedProps = {
 
     renderCell: 'rect',
     colors: {
-        type: 'diverging',
+        type: 'quantize',
         scheme: 'red_yellow_blue',
-        divergeAt: 0.5,
+        steps: 10,
         minValue: -100_000,
         maxValue: 100_000,
     },