@guardian/interactive-component-library 0.2.0-rc1 → 0.2.0-rc2

package/dist/components/molecules/slope-chart/index.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useRef, useMemo } from "preact/hooks";
+import { positionLabels, scaleLinear } from "../../../shared/helpers/labelsUtil.js";
+import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+const SlopeChart = ({
+  domain,
+  lines,
+  y1Label = (d) => d.y1,
+  y2Label = (d) => d.y2,
+  axis,
+  styles,
+  padding = { left: 24, right: 24, top: 20, bottom: 20 },
+  svgId
+}) => {
+  const wrapperRef = useRef(null);
+  const containerSize = useContainerSize(wrapperRef);
+  const width = containerSize ? containerSize.width : 0;
+  const contentWidth = Math.floor(width - padding.left - padding.right);
+  const contentHeight = contentWidth;
+  const height = contentHeight + padding.top + padding.bottom;
+  const yScale = scaleLinear(domain, [contentHeight, 0]);
+  const show = width > 0;
+  const y1Labels = useMemo(() => {
+    let labels = lines.map((d) => ({ y: yScale(d.y1), value: y1Label(d) }));
+    return positionLabels(labels);
+  }, [lines, y1Label, yScale]);
+  const y2Labels = useMemo(() => {
+    let labels = lines.map((d) => ({ y: yScale(d.y2), value: y2Label(d) }));
+    return positionLabels(labels);
+  }, [lines, y2Label, yScale]);
+  styles = mergeStyles({ ...defaultStyles }, styles);
+  const chart = /* @__PURE__ */ jsx("svg", { className: styles.svg, width, height, id: svgId, children: /* @__PURE__ */ jsxs("g", { transform: `translate(${padding.left} ${padding.top})`, children: [
+    /* @__PURE__ */ jsxs("g", { transform: `translate(0 ${contentHeight})`, children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          x2: contentWidth,
+          className: styles.axis,
+          shapeRendering: "crispEdges"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          dominantBaseline: "hanging",
+          className: [styles.label, styles.axisLabel].join(" "),
+          children: axis.startLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: contentWidth,
+          dominantBaseline: "hanging",
+          textAnchor: "end",
+          className: [styles.label, styles.axisLabel].join(" "),
+          children: axis.endLabel
+        }
+      )
+    ] }),
+    lines.map((line, index) => {
+      const itemStyles = mergeStyles({ ...styles }, line.styles);
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: 0,
+            y1: yScale(line.y1),
+            x2: contentWidth,
+            y2: yScale(line.y2),
+            className: `${itemStyles.lineWhite}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: 0,
+            y1: yScale(line.y1),
+            x2: contentWidth,
+            y2: yScale(line.y2),
+            className: `${itemStyles.line} stroke-color--${line.abbreviation}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: 0,
+            cy: yScale(line.y1),
+            r: 4,
+            className: `${itemStyles.circle} fill-color--${line.abbreviation}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: contentWidth,
+            cy: yScale(line.y2),
+            r: 4,
+            className: `${itemStyles.circle} fill-color--${line.abbreviation}`
+          }
+        )
+      ] }, index);
+    }),
+    y1Labels.map((label, index) => {
+      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: 0,
+          y: label.y,
+          className: [styles.label, styles.y1Label].join(" "),
+          textAnchor: "end",
+          dominantBaseline: "middle",
+          children: label.value
+        }
+      ) }, index);
+    }),
+    y2Labels.map((label, index) => {
+      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: contentWidth,
+          y: label.y,
+          className: [styles.label, styles.y2Label].join(" "),
+          textAnchor: "start",
+          dominantBaseline: "middle",
+          children: label.value
+        }
+      ) }, index);
+    })
+  ] }) });
+  return /* @__PURE__ */ jsx("div", { className: styles.slopeChartContainer, ref: wrapperRef, children: show && chart });
+};
+export {
+  SlopeChart,
+  SlopeChart as default
+};

package/dist/components/molecules/slope-chart/style.module.css.js

@@ -0,0 +1,35 @@
+const slopeChartContainer = "_slopeChartContainer_nmjjj_1";
+const svg = "_svg_nmjjj_5";
+const line = "_line_nmjjj_9";
+const lineWhite = "_lineWhite_nmjjj_14";
+const circle = "_circle_nmjjj_19";
+const label = "_label_nmjjj_23";
+const y1Label = "_y1Label_nmjjj_29";
+const y2Label = "_y2Label_nmjjj_33";
+const axis = "_axis_nmjjj_37";
+const axisLabel = "_axisLabel_nmjjj_42";
+const defaultStyles = {
+  slopeChartContainer,
+  svg,
+  line,
+  lineWhite,
+  circle,
+  label,
+  y1Label,
+  y2Label,
+  axis,
+  axisLabel
+};
+export {
+  axis,
+  axisLabel,
+  circle,
+  defaultStyles as default,
+  label,
+  line,
+  lineWhite,
+  slopeChartContainer,
+  svg,
+  y1Label,
+  y2Label
+};

package/dist/components/molecules/svg-map/context/MapContext.d.ts

@@ -0,0 +1 @@
+export const MapContext: import('preact').Context<any>;

package/dist/components/molecules/svg-map/context/MapContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "preact";
+const MapContext = createContext();
+export {
+  MapContext
+};

package/dist/components/molecules/svg-map/context/SVGMapProvider.d.ts

@@ -0,0 +1,10 @@
+export function SVGMapProvider({ id, mapRef, width, height, padding, config, selectedFeature, children, }: {
+    id: any;
+    mapRef: any;
+    width: any;
+    height: any;
+    padding: any;
+    config: any;
+    selectedFeature: any;
+    children: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/svg-map/context/SVGMapProvider.js

@@ -0,0 +1,88 @@
+import { jsx } from "preact/jsx-runtime";
+import { useMemo, useRef, useCallback } from "preact/hooks";
+import { geoPath } from "d3-geo";
+import { bboxFeature } from "../helpers/bboxFeature.js";
+import { MapContext } from "./MapContext.js";
+function SVGMapProvider({
+  id,
+  mapRef,
+  width,
+  height,
+  padding,
+  config,
+  selectedFeature,
+  children
+}) {
+  const contentSize = useMemo(
+    () => ({
+      width: width - padding.left - padding.right,
+      height: height - padding.top - padding.bottom
+    }),
+    [width, height, padding]
+  );
+  const projection = useMemo(() => {
+    return config.projection.fitSize(
+      [contentSize.width, contentSize.height],
+      bboxFeature(config.bounds)
+    );
+  }, [contentSize, config]);
+  const path = geoPath().projection(projection);
+  const layerSet = useRef(/* @__PURE__ */ new Set());
+  const layers = useRef([]);
+  const updateLayers = useCallback((layerSet2) => {
+    const _layers = Array.from(layerSet2.current);
+    _layers.sort((a, b) => {
+      return b.zIndex - a.zIndex;
+    });
+    layers.current = _layers;
+  }, []);
+  const registerLayer = useCallback(
+    (layer) => {
+      layerSet.current.add(layer);
+      updateLayers(layerSet);
+    },
+    [updateLayers]
+  );
+  const unregisterLayer = useCallback(
+    (layer) => {
+      layerSet.current.delete(layer);
+      updateLayers(layerSet);
+    },
+    [updateLayers]
+  );
+  const findFeatureAtPoint = useCallback(
+    ({ x, y }) => {
+      const adjustedPoint = [x - padding.left, y - padding.top];
+      for (const layer of layers.current) {
+        if (typeof layer.findFeatureAtPoint === "function") {
+          const feature = layer.findFeatureAtPoint(adjustedPoint);
+          if (feature) return feature;
+        }
+      }
+      return null;
+    },
+    [padding]
+  );
+  const context = {
+    id,
+    projection,
+    config,
+    path,
+    size: { width, height },
+    contentSize,
+    padding,
+    extent: [
+      [0, 0],
+      [width, height]
+    ],
+    selectedFeature,
+    registerLayer,
+    unregisterLayer,
+    findFeatureAtPoint
+  };
+  mapRef.current = context;
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: context, children });
+}
+export {
+  SVGMapProvider
+};

package/dist/components/molecules/svg-map/helpers/bboxFeature.d.ts

@@ -0,0 +1,8 @@
+export function bboxFeature(bounds: any): {
+    type: string;
+    properties: {};
+    geometry: {
+        coordinates: any[][][];
+        type: string;
+    };
+};

package/dist/components/molecules/svg-map/helpers/bboxFeature.js

@@ -0,0 +1,26 @@
+function bboxFeature(bounds) {
+  const minLon = bounds[0][0];
+  const minLat = bounds[0][1];
+  const maxLon = bounds[1][0];
+  const maxLat = bounds[1][1];
+  const feature = {
+    type: "Feature",
+    properties: {},
+    geometry: {
+      coordinates: [
+        [
+          [minLon, maxLat],
+          [maxLon, maxLat],
+          [maxLon, minLat],
+          [minLon, minLat],
+          [minLon, maxLat]
+        ]
+      ],
+      type: "Polygon"
+    }
+  };
+  return feature;
+}
+export {
+  bboxFeature
+};

package/dist/components/molecules/svg-map/helpers/dynamicPropValue.d.ts

@@ -0,0 +1 @@
+export function dynamicPropValue(prop: any, d: any, index: any): any;

package/dist/components/molecules/svg-map/helpers/dynamicPropValue.js

@@ -0,0 +1,9 @@
+function dynamicPropValue(prop, d, index) {
+  if (typeof prop === "function") {
+    return prop(d, index);
+  }
+  return prop;
+}
+export {
+  dynamicPropValue
+};

package/dist/components/molecules/svg-map/helpers/geoMath.d.ts

@@ -0,0 +1,4 @@
+export function calculateScale(mapBounds: any, mapWidthPixels: any, mapHeightPixels: any): number;
+export function circleContainsCoordinates(circleCoordinates: any, radius: any, coordinates: any): boolean;
+export function distanceInKmBetweenEarthCoordinates(point1: any, point2: any): number;
+export function degreesToRadians(degrees: any): number;

package/dist/components/molecules/svg-map/helpers/saveSVG.d.ts

@@ -0,0 +1 @@
+export function saveSVG(elementId: any): void;

package/dist/components/molecules/svg-map/hooks/useThrowIfNonLayerChildren.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Throws an error if any child component in `children` is not a valid layer (Polygon, Line, etc)
+ */
+export function useThrowIfNonLayerChildren(children: any): void;

package/dist/components/molecules/svg-map/hooks/useThrowIfNonLayerChildren.js

@@ -0,0 +1,19 @@
+import { useEffect } from "preact/hooks";
+import { toChildArray } from "preact";
+import * as index from "../layers/index.js";
+const layerTypes = Object.values(index);
+function useThrowIfNonLayerChildren(children) {
+  useEffect(() => {
+    const firstNonLayerChild = toChildArray(children).find(
+      (child) => !layerTypes.includes(child.type)
+    );
+    if (firstNonLayerChild) {
+      throw Error(
+        `unknown component type passed as child to SVGMap component: ${firstNonLayerChild.type}`
+      );
+    }
+  }, [children]);
+}
+export {
+  useThrowIfNonLayerChildren
+};

package/dist/components/molecules/svg-map/index.d.ts

@@ -0,0 +1,38 @@
+export * as MapLayers from './layers';
+export namespace _Projection {
+    let geoAlbersUKComposite: any;
+    let geoAlbersEngland: any;
+    let geoMercator: any;
+}
+export namespace MapConfiguration {
+    namespace UKComposite {
+        import projection = _Projection.geoAlbersUKComposite;
+        export { projection };
+        export let bounds: number[][];
+        export let drawCompositionBorders: boolean;
+        export let drawToCanvas: boolean;
+    }
+    namespace England {
+        import projection_1 = _Projection.geoAlbersEngland;
+        export { projection_1 as projection };
+        let bounds_1: number[][];
+        export { bounds_1 as bounds };
+        let drawCompositionBorders_1: boolean;
+        export { drawCompositionBorders_1 as drawCompositionBorders };
+        let drawToCanvas_1: boolean;
+        export { drawToCanvas_1 as drawToCanvas };
+    }
+    namespace London {
+        let projection_2: any;
+        export { projection_2 as projection };
+        let bounds_2: number[][];
+        export { bounds_2 as bounds };
+        let drawCompositionBorders_2: boolean;
+        export { drawCompositionBorders_2 as drawCompositionBorders };
+        let drawToCanvas_2: boolean;
+        export { drawToCanvas_2 as drawToCanvas };
+    }
+}
+export const SVGMap: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<{}> & {
+    ref?: import('preact').Ref<any>;
+}>;

package/dist/components/molecules/svg-map/index.js

@@ -0,0 +1,120 @@
+import { jsx } from "preact/jsx-runtime";
+import { geoAlbers, geoMercator } from "d3-geo";
+import geoAlbersUk from "../../../node_modules/.pnpm/d3-composite-projections@1.4.0/node_modules/d3-composite-projections/src/albersUk.js";
+import { SVGMapProvider } from "./context/SVGMapProvider.js";
+import { SVGRenderer } from "./renderers/SVGRenderer.js";
+import { cloneElement } from "preact";
+import { useRef, useState, useLayoutEffect, useImperativeHandle, useMemo } from "preact/hooks";
+import { forwardRef } from "preact/compat";
+import { useThrowIfNonLayerChildren } from "./hooks/useThrowIfNonLayerChildren.js";
+import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
+import styles from "./style.module.css.js";
+import "./context/MapContext.js";
+const _Projection = {
+  geoAlbersUKComposite: geoAlbersUk(),
+  geoAlbersEngland: geoAlbers().center([0, 52.7]).rotate([1.1743, 0]).parallels([50, 54]),
+  geoMercator: geoMercator()
+};
+const MapConfiguration = {
+  UKComposite: {
+    projection: _Projection.geoAlbersUKComposite,
+    bounds: [
+      [-8.642194417322951, 49.88234469492934],
+      [1.7683086664999994, 60.8456995072]
+    ],
+    drawCompositionBorders: true,
+    drawToCanvas: false
+  },
+  England: {
+    projection: _Projection.geoAlbersEngland,
+    bounds: [
+      [-6.41866730264044, 49.8647926027119],
+      [1.76370537625026, 55.8111151140706]
+    ],
+    drawCompositionBorders: false,
+    drawToCanvas: false
+  },
+  London: {
+    projection: geoMercator(),
+    bounds: [
+      [-0.510356073504132, 51.2867586289553],
+      [0.334043866981608, 51.6918768002741]
+    ],
+    drawCompositionBorders: false,
+    drawToCanvas: false
+  }
+};
+const ZERO_PADDING = { top: 0, right: 0, bottom: 0, left: 0 };
+const SVGMap = forwardRef(
+  ({
+    id,
+    width,
+    height,
+    config,
+    children,
+    padding = { top: 20, right: 20, bottom: 20, left: 20 },
+    selectedFeature
+  }, ref) => {
+    useThrowIfNonLayerChildren(children);
+    padding = padding || ZERO_PADDING;
+    const containerRef = useRef();
+    const [isReady, setIsReady] = useState(false);
+    useLayoutEffect(() => {
+      if (!isReady) {
+        setIsReady(true);
+      }
+      return () => {
+        if (isReady) {
+          setIsReady(false);
+        }
+      };
+    }, [isReady]);
+    const mapRef = useRef();
+    useImperativeHandle(
+      ref,
+      () => ({
+        isReady,
+        getContainer: () => containerRef.current,
+        getContext: () => mapRef.current
+      }),
+      [isReady]
+    );
+    const containerSize = useContainerSize(containerRef);
+    const containerStyle = useMemo(() => {
+      const style = {};
+      if (width > 0) style["width"] = width;
+      if (height > 0) style["height"] = height;
+      return style;
+    }, [width, height]);
+    const renderSVG = containerSize && !config.drawToCanvas;
+    const childrenArray = Array.isArray(children) ? children : [children];
+    return /* @__PURE__ */ jsx(
+      "figure",
+      {
+        ref: containerRef,
+        className: styles.container,
+        style: containerStyle,
+        children: renderSVG && /* @__PURE__ */ jsx(
+          SVGMapProvider,
+          {
+            id,
+            width: containerSize.width,
+            height: containerSize.height,
+            padding,
+            config,
+            mapRef,
+            selectedFeature,
+            children: /* @__PURE__ */ jsx(SVGRenderer, { children: childrenArray.map(
+              (child, index) => cloneElement(child, { zIndex: index })
+            ) })
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  MapConfiguration,
+  SVGMap,
+  _Projection
+};

package/dist/components/molecules/svg-map/layers/CompositionBorders.d.ts

@@ -0,0 +1,3 @@
+export function CompositionBorders({ styles }: {
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/svg-map/layers/CompositionBorders.js

@@ -0,0 +1,14 @@
+import { jsx } from "preact/jsx-runtime";
+import { useContext } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+import defaultStyles from "./compositionBorders.module.scss.js";
+import { mergeStyles } from "../../../../styles/helpers/mergeStyles.js";
+function CompositionBorders({ styles }) {
+  const context = useContext(MapContext);
+  const { projection } = context;
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx("path", { className: styles.path, d: projection.getCompositionBorders() });
+}
+export {
+  CompositionBorders
+};

package/dist/components/molecules/svg-map/layers/Line.d.ts

@@ -0,0 +1,7 @@
+export function Line({ id, features, stroke, strokeWidth, styles }: {
+    id: any;
+    features: any;
+    stroke?: any;
+    strokeWidth?: number;
+    styles: any;
+}): import("preact").JSX.Element | "<!--Line layer-->";

package/dist/components/molecules/svg-map/layers/Line.js

@@ -0,0 +1,48 @@
+import { jsx, Fragment } from "preact/jsx-runtime";
+import { useContext, useEffect } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+import { dynamicPropValue } from "../helpers/dynamicPropValue.js";
+function Line({ id, features, stroke = null, strokeWidth = 1, styles }) {
+  const context = useContext(MapContext);
+  const draw = (ctx, path) => {
+    for (const feature of features) {
+      ctx.beginPath();
+      ctx.lineWidth = strokeWidth / context.pixelRatio;
+      ctx.strokeStyle = stroke;
+      path(feature);
+      ctx.stroke();
+    }
+  };
+  useEffect(() => {
+    if (context.config.drawToCanvas) {
+      context.register(draw);
+    }
+    return () => {
+      if (context.config.drawToCanvas) {
+        context.unregister(draw);
+      }
+    };
+  }, []);
+  if (context.config.drawToCanvas) {
+    return "<!--Line layer-->";
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: features.map((d, index) => {
+    const resolvedStrokeWidth = dynamicPropValue(strokeWidth, d, index);
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        id: dynamicPropValue(id, d, index),
+        stroke: dynamicPropValue(stroke, d, index),
+        strokeLinejoin: "round",
+        strokeWidth: resolvedStrokeWidth,
+        fill: "none",
+        className: dynamicPropValue(styles, d, index),
+        d: context.path(d)
+      },
+      index
+    );
+  }) });
+}
+export {
+  Line
+};

package/dist/components/molecules/svg-map/layers/Point.d.ts

@@ -0,0 +1,10 @@
+export function Point({ id, features, radius, fill, stroke, strokeWidth, zIndex, styles, }: {
+    id: any;
+    features: any;
+    radius?: number;
+    fill?: any;
+    stroke?: any;
+    strokeWidth?: number;
+    zIndex?: number;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/svg-map/layers/Point.js

@@ -0,0 +1,59 @@
+import { jsx, Fragment } from "preact/jsx-runtime";
+import { useContext, useEffect } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+import { dynamicPropValue } from "../helpers/dynamicPropValue.js";
+function Point({
+  id,
+  features,
+  radius = 4,
+  fill = null,
+  stroke = null,
+  strokeWidth = 1,
+  zIndex = 0,
+  styles
+}) {
+  const context = useContext(MapContext);
+  useEffect(() => {
+    function findFeatureAtPoint(point) {
+      for (const [index, feature] of features.entries()) {
+        const resolvedRadius = dynamicPropValue(radius, feature, index);
+        if (isNaN(resolvedRadius)) return;
+        const [cx, cy] = context.projection(feature.geometry.coordinates);
+        const distanceSquared = (point[0] - cx) ** 2 + (point[1] - cy) ** 2;
+        const radiusSquared = resolvedRadius ** 2;
+        if (distanceSquared <= radiusSquared) {
+          return feature;
+        }
+      }
+      return null;
+    }
+    const layer = {
+      zIndex,
+      findFeatureAtPoint
+    };
+    context.registerLayer(layer);
+    return () => {
+      context.unregisterLayer(layer);
+    };
+  }, [context, features, radius, zIndex]);
+  return /* @__PURE__ */ jsx(Fragment, { children: features.map((d, index) => {
+    const [cx, cy] = context.projection(d.geometry.coordinates);
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        id: dynamicPropValue(id, d, index),
+        cx,
+        cy,
+        r: dynamicPropValue(radius, d, index),
+        className: dynamicPropValue(styles, d, index),
+        fill: dynamicPropValue(fill, d, index),
+        stroke: dynamicPropValue(stroke, d, index),
+        strokeWidth: dynamicPropValue(strokeWidth, d, index)
+      },
+      index
+    );
+  }) });
+}
+export {
+  Point
+};