@seasketch/geoprocessing/dist/src/components/chart/ChartLegend.js

Geoprocessing and reporting framework for SeaSketch 2.0

import React from "react";
import { styled } from "styled-components";
const StyledLegend = styled.div `
  h3,
  h6 {
    margin: 0;
    line-height: 1em;
  }
  h3 {
    margin-bottom: 1em;
  }
  h6 {
    font-size: 0.8em;
    padding: 0 0.5em 0.5em 0;
    width: 5em;
    text-align: right;
    color: #666;
  }
  figure {
    margin: 1em auto;
    max-width: 1100px;
    position: relative;
  }
  .graphic {
    padding-left: 10px;
  }

  .chart {
    position: relative;
    overflow: visible;
    width: 0%;
    animation: expand 1.5s ease forwards;
  }

  .x-axis {
    text-align: center;
    padding: 0em 0 0.5em;
  }

  .legend {
    margin: 0 auto;
    padding: 0;
    font-size: 0.9em;
  }
  .legend li {
    display: inline-block;
    padding: 0.25em 1em;
    line-height: 1em;
  }
  .legend li:before {
    content: "";
    margin-right: 0.5em;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #334d5c;
  }

  ${(props) => props.blockGroupColors.map((blockGroupColor, index) => `
      .legend li:nth-of-type(${index + 1}):before {
        background-color: ${blockGroupColor};
      }
    `)}

  @media screen and (min-width: 768px) {
    h6 {
      padding: 0 0.5em 0.5em 0;
      width: 5em;
      float: left;
    }
    .legend {
      width: 80%;
    }
  }
`;
/**
 * Horizontal stacked bar chart component
 */
export const ChartLegend = ({ blockGroupNames, ...rest }) => {
    const blockGroupStyles = rest.blockGroupStyles
        ? rest.blockGroupStyles
        : [
            { backgroundColor: "blue" },
            { backgroundColor: "green" },
            { backgroundColor: "gray" },
        ];
    return (React.createElement(StyledLegend, { blockGroupColors: blockGroupStyles.map((style) => style.backgroundColor) },
        React.createElement("figure", null,
            React.createElement("div", { className: "x-axis" },
                React.createElement("ul", { className: "legend" }, blockGroupNames.map((blockGroupName, index) => (React.createElement("li", { key: index }, blockGroupName))))))));
};
//# sourceMappingURL=ChartLegend.js.map