Revert "Support new option getRingColor to determine text and legend color."

This reverts commit 1a2fa2f4c7. Signed-off-by: Aramis Sennyey <sennyeya@amazon.com>
2023-02-24 12:58:19 -05:00
parent 1a2fa2f4c7
commit aff489bb79
10 changed files with 18 additions and 67 deletions
@@ -18,10 +18,9 @@ import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import GetBBoxPolyfill from '../../utils/polyfills/getBBox';

-import Radar from './Radar';
-import type { RadarProps } from './types';
+import Radar, { Props } from './Radar';

-const minProps: RadarProps = {
+const minProps: Props = {
  width: 500,
  height: 200,
  quadrants: [{ id: 'languages', name: 'Languages' }],
@@ -15,20 +15,27 @@
 */

 import React, { useMemo, useRef, useState } from 'react';
-import type { Entry } from '../../utils/types';
+import type { Entry, Quadrant, Ring } from '../../utils/types';
 import RadarPlot from '../RadarPlot';
-import { RadarProps } from './types';
 import { adjustEntries, adjustQuadrants, adjustRings } from './utils';

+export type Props = {
+  width: number;
+  height: number;
+  quadrants: Quadrant[];
+  rings: Ring[];
+  entries: Entry[];
+  svgProps?: object;
+};
+
 const Radar = ({
  width,
  height,
  quadrants,
  rings,
  entries,
-  getRingColor,
  ...props
-}: RadarProps): JSX.Element => {
+}: Props): JSX.Element => {
  const radius = Math.min(width, height) / 2;

  // State
@@ -59,7 +66,6 @@ const Radar = ({
  return (
    <svg ref={node} width={width} height={height} {...props.svgProps}>
      <RadarPlot
-        getRingColor={getRingColor}
        width={width}
        height={height}
        radius={radius}
@@ -1,27 +0,0 @@
-/*
- * Copyright 2023 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Quadrant, Ring, Entry } from '../../utils/types';
-import { Color } from 'csstype';
-
-export type RadarProps = {
-  width: number;
-  height: number;
-  quadrants: Quadrant[];
-  rings: Ring[];
-  entries: Entry[];
-  svgProps?: object;
-  getRingColor?: (ring: Ring) => Color;
-};
@@ -20,8 +20,7 @@ import React, { useEffect } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { RadarEntry, techRadarApiRef, TechRadarLoaderResponse } from '../api';
 import Radar from '../components/Radar';
-import { Entry, Ring } from '../utils/types';
-import { RadarProps } from './Radar/types';
+import { Entry } from '../utils/types';

 const useTechRadarLoader = (id: string | undefined) => {
  const errorApi = useApi(errorApiRef);
@@ -90,8 +89,6 @@ export interface TechRadarComponentProps {
   * Text to filter {@link RadarEntry} inside Tech Radar
   */
  searchText?: string;
-
-  getRingColor?: RadarProps['getRingColor'];
 }

 /**
@@ -105,7 +102,6 @@ export interface TechRadarComponentProps {
 */
 export function RadarComponent(props: TechRadarComponentProps) {
  const { loading, error, value: data } = useTechRadarLoader(props.id);
-  const { getRingColor = (ring: Ring) => ring.color } = props;

  const mapToEntries = (
    loaderResponse: TechRadarLoaderResponse,
@@ -140,7 +136,6 @@ export function RadarComponent(props: TechRadarComponentProps) {
      {!loading && !error && data && (
        <Radar
          {...props}
-          getRingColor={getRingColor}
          rings={data.rings}
          quadrants={data.quadrants}
          entries={mapToEntries(data)}
@@ -17,12 +17,10 @@
 import React from 'react';
 import { makeStyles, Theme } from '@material-ui/core';
 import type { Ring } from '../../utils/types';
-import { RadarProps } from '../Radar/types';

 export type Props = {
  radius: number;
  rings: Ring[];
-  getRingColor?: RadarProps['getRingColor'];
 };

 const useStyles = makeStyles<Theme>(theme => ({
@@ -49,7 +47,7 @@ const useStyles = makeStyles<Theme>(theme => ({
 // A component for the background grid of the radar, with axes, rings etc.  It will render around the origin, i.e.
 // assume that (0, 0) is in the middle of the drawing.
 const RadarGrid = (props: Props) => {
-  const { radius, rings, getRingColor } = props;
+  const { radius, rings } = props;
  const classes = useStyles(props);

  const makeRingNode = (ringIndex: number, ringRadius?: number) => [
@@ -65,9 +63,7 @@ const RadarGrid = (props: Props) => {
      y={ringRadius !== undefined ? -ringRadius + 42 : undefined}
      textAnchor="middle"
      className={classes.text}
-      style={{
-        fill: getRingColor ? getRingColor(rings[ringIndex]) : undefined,
-      }}
+      style={{ fill: rings[ringIndex].color }}
    >
      {rings[ringIndex].name}
    </text>,
@@ -88,7 +88,6 @@ const RadarLegend = ({
  entries,
  onEntryMouseEnter,
  onEntryMouseLeave,
-  getRingColor,
  ...props
 }: RadarLegendProps): JSX.Element => {
  const classes = useStyles(props);
@@ -97,7 +96,6 @@ const RadarLegend = ({
    <g data-testid="radar-legend">
      {quadrants.map(quadrant => (
        <RadarLegendQuadrant
-          getRingColor={getRingColor}
          key={quadrant.id}
          segments={setupSegments(entries)}
          quadrant={quadrant}
@@ -28,7 +28,6 @@ type RadarLegendQuadrantProps = {
  classes: ClassNameMap<string>;
  onEntryMouseEnter: RadarLegendProps['onEntryMouseEnter'];
  onEntryMouseLeave: RadarLegendProps['onEntryMouseLeave'];
-  getRingColor: RadarLegendProps['getRingColor'];
 };

 export const RadarLegendQuadrant = ({
@@ -38,7 +37,6 @@ export const RadarLegendQuadrant = ({
  classes,
  onEntryMouseEnter,
  onEntryMouseLeave,
-  getRingColor,
 }: RadarLegendQuadrantProps) => {
  return (
    <foreignObject
@@ -57,7 +55,6 @@ export const RadarLegendQuadrant = ({
              key={ring.id}
              ring={ring}
              classes={classes}
-              getRingColor={getRingColor}
              entries={getSegment(segments, quadrant, ring)}
              onEntryMouseEnter={onEntryMouseEnter}
              onEntryMouseLeave={onEntryMouseLeave}
@@ -26,7 +26,6 @@ type RadarLegendRingProps = {
  classes: ClassNameMap<string>;
  onEntryMouseEnter?: RadarLegendProps['onEntryMouseEnter'];
  onEntryMouseLeave?: RadarLegendProps['onEntryMouseEnter'];
-  getRingColor?: RadarLegendProps['getRingColor'];
 };

 export const RadarLegendRing = ({
@@ -35,14 +34,10 @@ export const RadarLegendRing = ({
  classes,
  onEntryMouseEnter,
  onEntryMouseLeave,
-  getRingColor,
 }: RadarLegendRingProps) => {
  return (
    <div data-testid="radar-ring" key={ring.id} className={classes.ring}>
-      <h3
-        className={classes.ringHeading}
-        style={{ color: getRingColor ? getRingColor(ring) : undefined }}
-      >
+      <h3 className={classes.ringHeading} style={{ color: ring.color }}>
        {ring.name}
      </h3>
      {entries.length === 0 ? (
@@ -15,7 +15,6 @@
 */

 import { Entry, Quadrant, Ring } from '../../utils/types';
-import { RadarProps } from '../Radar/types';

 export type Segments = {
  [k: number]: { [k: number]: Entry[] };
@@ -27,6 +26,4 @@ export type RadarLegendProps = {
  entries: Entry[];
  onEntryMouseEnter?: (entry: Entry) => void;
  onEntryMouseLeave?: (entry: Entry) => void;
-
-  getRingColor?: RadarProps['getRingColor'];
 };
@@ -22,7 +22,6 @@ import RadarEntry from '../RadarEntry';
 import RadarBubble from '../RadarBubble';
 import RadarFooter from '../RadarFooter';
 import RadarLegend from '../RadarLegend';
-import { RadarProps } from '../Radar/types';

 export type Props = {
  width: number;
@@ -34,8 +33,6 @@ export type Props = {
  activeEntry?: Entry;
  onEntryMouseEnter?: (entry: Entry) => void;
  onEntryMouseLeave?: (entry: Entry) => void;
-
-  getRingColor?: RadarProps['getRingColor'];
 };

 // A component that draws the radar circle.
@@ -50,7 +47,6 @@ const RadarPlot = (props: Props): JSX.Element => {
    activeEntry,
    onEntryMouseEnter,
    onEntryMouseLeave,
-    getRingColor,
  } = props;

  return (
@@ -65,10 +61,9 @@ const RadarPlot = (props: Props): JSX.Element => {
        onEntryMouseLeave={
          onEntryMouseLeave && (entry => onEntryMouseLeave(entry))
        }
-        getRingColor={getRingColor}
      />
      <g transform={`translate(${width / 2}, ${height / 2})`}>
-        <RadarGrid radius={radius} rings={rings} getRingColor={getRingColor} />
+        <RadarGrid radius={radius} rings={rings} />
        <RadarFooter x={-0.5 * width} y={0.5 * height} />
        {entries.map(entry => (
          <RadarEntry