population-circles.tsx

Filename	Percent	Threshold	Total	Covered	Uncovered
src/pages/d3js/population-circles.tsx	100.00%	95%	70	70	0

import React from "react"

import { DemoPageProps } from "@/common"

import Demo from "@/components/demo"

import main, {
  CONTAINER_ID,
} from "@/demos/population-circles/population-circles"
import * as styles from "@/demos/population-circles/population-circles.module.css"

const PopulationCircles = ({ pageContext }: DemoPageProps) => (
  <Demo main={main} pageContext={pageContext}>
    <form>
      {[
        { id: "total", label: "Total" },
        { id: "males", label: "Males" },
        { id: "females", label: "Females" },
      ].map((...[{ id, label }, radioIndex]) => (
        <div className={styles.radio} key={id}>
          <input
            defaultChecked={radioIndex === 0}
            id={id}
            name="type"
            type="radio"
            value={id}
          />
          <label htmlFor={id}>{label}</label>
        </div>
      ))}
    </form>
    <div className={styles.slider}>
      <p>Time</p>
      <div className="time-slider" />
    </div>
    <div className={styles.slider}>
      <p>Population Percentile</p>
      <div className="population-slider" />
    </div>
    <div id={CONTAINER_ID} />
  </Demo>
)

export default PopulationCircles

[]

TypeScript Coverage Report generated by type-coverage and typescript-coverage-report at Wed, 01 Jun 2022 21:16:57 GMT

TypeScript coverage report