[site]:seo - update title, canonical

package-lock.json

@@ -49897,7 +49897,7 @@
     },
     "packages/components": {
       "name": "@portaljs/components",
-      "version": "0.6.0",
+      "version": "1.2.0",
       "dependencies": {
         "@githubocto/flat-ui": "^0.14.1",
         "@heroicons/react": "^2.0.17",
@@ -50383,7 +50383,7 @@
     },
     "packages/remark-wiki-link": {
       "name": "@portaljs/remark-wiki-link",
-      "version": "1.1.3",
+      "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "mdast-util-to-markdown": "^1.5.0",

packages/components/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @portaljs/components
 
+## 1.2.2
+
+### Patch Changes
+
+- [`eeb480e8`](https://github.com/datopian/datahub/commit/eeb480e8cff2d11072ace55ad683a65f54f5d07a) Thanks [@olayway](https://github.com/olayway)! - Adjust `xAxisTimeUnit` property in LineChart to allow for passing `yearmonth`.
+
+## 1.2.1
+
+### Patch Changes
+
+- [`836b143a`](https://github.com/datopian/datahub/commit/836b143a3178b893b1aae3fb511d795dd3a63545) Thanks [@olayway](https://github.com/olayway)! - Fix: make tileLayerName in Map optional.
+
+## 1.2.0
+
+### Minor Changes
+
+- [#1338](https://github.com/datopian/datahub/pull/1338) [`63d9e3b7`](https://github.com/datopian/datahub/commit/63d9e3b7543c38154e6989ef1cc1d694ae9fc4f8) Thanks [@olayway](https://github.com/olayway)! - Support for plotting multiple series in LineChart component.
+
 ## 1.1.0
 
 ### Minor Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [

packages/components/src/components/LineChart.tsx

@@ -5,7 +5,7 @@ import loadData from '../lib/loadData';
 import { Data } from '../types/properties';
 
 type AxisType = 'quantitative' | 'temporal';
-type TimeUnit = 'year' | undefined; // or ...
+type TimeUnit = 'year' | 'yearmonth' | undefined; // or ...
 
 export type LineChartProps = {
   data: Omit<Data, 'csv'>;
@@ -13,9 +13,10 @@ export type LineChartProps = {
   xAxis: string;
   xAxisType?: AxisType;
   xAxisTimeUnit?: TimeUnit;
-  yAxis: string;
+  yAxis: string | string[];
   yAxisType?: AxisType;
   fullWidth?: boolean;
+  symbol?: string;
 };
 
 export function LineChart({
@@ -26,6 +27,7 @@ export function LineChart({
   xAxisTimeUnit = 'year', //  TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
   yAxis,
   yAxisType = 'quantitative',
+  symbol,
 }: LineChartProps) {
   const url = data.url;
   const values = data.values;
@@ -33,6 +35,7 @@ export function LineChart({
 
   //  By default, assumes data is an Array...
   const [specData, setSpecData] = useState<any>({ name: 'table' });
+  const isMultiYAxis = Array.isArray(yAxis);
 
   const spec = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
@@ -46,6 +49,11 @@ export function LineChart({
       tooltip: true,
     },
     data: specData,
+    ...(isMultiYAxis
+      ? {
+          transform: [{ fold: yAxis, as: ['key', 'value'] }],
+        }
+      : {}),
     selection: {
       grid: {
         type: 'interval',
@@ -59,9 +67,25 @@ export function LineChart({
         type: xAxisType,
       },
       y: {
-        field: yAxis,
+        field: isMultiYAxis ? 'value' : yAxis,
         type: yAxisType,
       },
+      ...(symbol
+        ? {
+            color: {
+              field: symbol,
+              type: 'nominal',
+            },
+          }
+        : {}),
+      ...(isMultiYAxis
+        ? {
+            color: {
+              field: 'key',
+              type: 'nominal',
+            },
+          }
+        : {}),
     },
   } as any;
 

packages/components/src/components/Map.tsx

@@ -36,7 +36,7 @@ interface TileLayerSettings extends L.TileLayerOptions {
 }
 
 export type MapProps = {
-  tileLayerName: TileLayerPreset;
+  tileLayerName?: TileLayerPreset;
   tileLayerOptions?: TileLayerSettings | undefined;
   layers: {
     data: GeospatialData;
@@ -91,19 +91,19 @@ export function Map({
   const [layersData, setLayersData] = useState<any>([]);
 
   /*
-  tileLayerDefaultOptions
+    tileLayerDefaultOptions
-  extract all environment variables thats starts with NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_.
+    extract all environment variables thats starts with NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_.
-    the variables names are the same as the TileLayer object properties:
+      the variables names are the same as the TileLayer object properties:
-    - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_url:
+      - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_url:
-    - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_attribution
+      - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_attribution
-    - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_accessToken
+      - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_accessToken
-    - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_id
+      - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_id
-    - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_ext
+      - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_ext
-    - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_bounds
+      - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_bounds
-    - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_maxZoom
+      - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_maxZoom
-    - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_minZoom
+      - NEXT_PUBLIC_MAP_TILE_LAYER_OPTION_minZoom
-    see TileLayerOptions inteface
+      see TileLayerOptions inteface
-   */
+     */
 
   //tileLayerData prioritizes properties passed through component over those passed through .env variables
   tileLayerOptions = Object.assign(tileLayerDefaultOptions, tileLayerOptions);

packages/components/stories/LineChart.stories.ts

@@ -30,11 +30,15 @@ Must be an object with one of the following properties: `url` or `values` \n\n \
     },
     yAxis: {
       description:
-        'Name of the column header or object property that represents the Y-axis on the data.',
+        'Name of the column headers or object properties that represent the Y-axis on the data.',
     },
     yAxisType: {
       description: 'Type of the Y-axis',
     },
+    symbol: {
+      description:
+        'Name of the column header or object property that represents a series for multiple series.',
+    },
   },
 };
 
@@ -60,6 +64,51 @@ export const FromDataPoints: Story = {
   },
 };
 
+export const MultiSeries: Story = {
+  name: 'Line chart with multiple series (specifying symbol)',
+  args: {
+    data: {
+      values: [
+        { year: '1850', value: -0.41765878, z: 'A' },
+        { year: '1851', value: -0.2333498, z: 'A' },
+        { year: '1852', value: -0.22939907, z: 'A' },
+        { year: '1853', value: -0.27035445, z: 'A' },
+        { year: '1854', value: -0.29163003, z: 'A' },
+        { year: '1850', value: -0.42993882, z: 'B' },
+        { year: '1851', value: -0.30365549, z: 'B' },
+        { year: '1852', value: -0.27905189, z: 'B' },
+        { year: '1853', value: -0.22939704, z: 'B' },
+        { year: '1854', value: -0.25688013, z: 'B' },
+        { year: '1850', value: -0.4757164, z: 'C' },
+        { year: '1851', value: -0.41971018, z: 'C' },
+        { year: '1852', value: -0.40724799, z: 'C' },
+        { year: '1853', value: -0.45049156, z: 'C' },
+        { year: '1854', value: -0.41896583, z: 'C' },
+      ],
+    },
+    xAxis: 'year',
+    yAxis: 'value',
+    symbol: 'z',
+  },
+};
+
+export const MultiColumns: Story = {
+  name: 'Line chart with multiple series (with multiple columns)',
+  args: {
+    data: {
+      values: [
+        { year: '1850', A: -0.41765878, B: -0.42993882, C: -0.4757164 },
+        { year: '1851', A: -0.2333498, B: -0.30365549, C: -0.41971018 },
+        { year: '1852', A: -0.22939907, B: -0.27905189, C: -0.40724799 },
+        { year: '1853', A: -0.27035445, B: -0.22939704, C: -0.45049156 },
+        { year: '1854', A: -0.29163003, B: -0.25688013, C: -0.41896583 },
+      ],
+    },
+    xAxis: 'year',
+    yAxis: ['A', 'B', 'C'],
+  },
+};
+
 export const FromURL: Story = {
   name: 'Line chart from URL',
   args: {

site/content/config.js

@@ -1,7 +1,7 @@
 const config = {
-  title: 'DataHub PortalJS - The JavaScript framework for data portals.',
+  title: 'PortalJS - The JavaScript framework for data portals.',
   description:
-    'DataHub PortalJS is a JavaScript framework for rapidly building rich data portal frontends using a modern frontend approach.',
+    'PortalJS is a JavaScript framework for rapidly building rich data portal frontends using a modern frontend approach.',
   theme: {
     default: 'dark',
     toggleIcon: '/images/theme-button.svg',
@@ -44,6 +44,7 @@ const config = {
       { rel: 'icon', href: '/favicon.ico' },
       { rel: 'apple-touch-icon', href: '/icon.png', sizes: '120x120' },
     ],
+    canonical: 'https://portaljs.com/',
     openGraph: {
       type: 'website',
       title: