Background color - Y axis

[bartoszgebka]

Hi, is there a way to color the background based on the Y-axis within a given range? Something like an interval annotation that colors on the X-axis (timeline chart).

[dosubot[bot]]

Hi @bartoszgebka! I'm here to help you with any bugs, questions, or contributions you might have. Let's tackle this together!

Yes, Apache Superset supports background coloring based on Y-axis values in some of its chart types. Specifically, in the time_pivot chart type, the background color can be adjusted based on the Y-axis values using the baseColor property. Here is an example of how it is implemented:

if (vizType === 'time_pivot') {
  if (baseColor) {
    const { r, g, b } = baseColor;
    chart.color(d => {
      const alpha = d.rank > 0 ? d.perc * 0.5 : 1;
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    });
  }
}

This code snippet shows that the time_pivot chart type uses the baseColor property to set the background color based on the Y-axis values ^[1].

For interval annotations on the Y-axis, you can adapt the approach used for X-axis interval annotations. Here is an example of how you might implement Y-axis interval annotations:

// Interval annotations for Y-axis
activeAnnotationLayers
  .filter(
    x =>
      x.annotationType === ANNOTATION_TYPES.INTERVAL &&
      annotationData &&
      annotationData[x.name],
  )
  .forEach((config, index) => {
    const e = applyNativeColumns(config);
    // Add interval annotation layer
    const annotations = d3
      .select(element)
      .select('.nv-wrap')
      .append('g')
      .attr('class', `nv-interval-annotation-layer-${index}`);

    const aColor =
      e.color || getColor(cleanColorInput(e.name), colorScheme);
    const tip = tipFactory(e);

    const records = (annotationData[e.name].records || [])
      .map(r => {
        const value = parseFloat(r[e.valueColumn]);
        const intervalEndValue = parseFloat(r[e.intervalEndColumn]);

        return {
          ...r,
          [e.valueColumn]: value,
          [e.intervalEndColumn]: intervalEndValue,
        };
      })
      .filter(
        record =>
          !Number.isNaN(record[e.valueColumn]) &&
          !Number.isNaN(record[e.intervalEndColumn]),
      );

    if (records.length > 0) {
      annotations
        .selectAll('rect')
        .data(records)
        .enter()
        .append('rect')
        .attr({
          x: 0,
          y: d =>
            Math.min(
              yScale(d[e.valueColumn]),
              yScale(d[e.intervalEndColumn]),
            ),
          width: annotationWidth,
          height: d =>
            Math.max(
              Math.abs(
                yScale(d[e.intervalEndColumn]) -
                  yScale(d[e.valueColumn]),
              ),
              1,
            ),
        })
        .attr('class', `${e.opacity} ${e.style}`)
        .style('stroke-width', e.width)
        .style('stroke', aColor)
        .style('fill', aColor)
        .style('fill-opacity', 0.2)
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
        .call(tip);
    }

    // update annotation positions on brush event
    if (chart.focus) {
      chart.focus.dispatch.on('onBrush.interval-annotation', () => {
        annotations
          .selectAll('rect')
          .data(records)
          .attr({
            y: d => yScale(d[e.valueColumn]),
            height: d => {
              const y1 = yScale(d[e.valueColumn]);
              const y2 = yScale(d[e.intervalEndColumn]);

              return y2 - y1;
            },
          });
      });
    }
  });

This code snippet demonstrates how to adapt the interval annotation implementation for the Y-axis by using the yScale for positioning and sizing the rectangles ^[1][2].

To continue talking to Dosu, mention @dosu.