From 88e0d3e99eca029673c4f8d37362ea8518ec95cc Mon Sep 17 00:00:00 2001 From: chejennifer <69875368+chejennifer@users.noreply.github.com> Date: Wed, 27 Sep 2023 16:31:26 -0700 Subject: [PATCH] [node server] enable multiple places for line chart (#3642) Screenshot 2023-09-27 at 4 06 16 PM url used to get this: http://localhost:3030/nodejs/chart-info?config={%22comparisonPlaces%22:[%22self%22,%22geoId/06%22],%22title%22:%22Prevalence%20of%20Health%20Conditions%20in%20Placer%20County%20(${date})%22,%22type%22:%22LINE%22}&place=geoId/06061&svSpec=[{%22name%22:%22Chronic%20Kidney%20Disease%22,%22statVar%22:%22Percent_Person_WithChronicKidneyDisease%22,%22unit%22:%22%25%22},{%22name%22:%22Chronic%20Obstructive%20Pulmonary%20Disease%22,%22statVar%22:%22Percent_Person_WithChronicObstructivePulmonaryDisease%22,%22unit%22:%22%25%22},{%22name%22:%22Coronary%20Heart%20Disease%22,%22statVar%22:%22Percent_Person_WithCoronaryHeartDisease%22,%22unit%22:%22%25%22},{%22name%22:%22Diabetes%22,%22statVar%22:%22Percent_Person_WithDiabetes%22,%22unit%22:%22%25%22}] --- static/js/components/subject_page/block.tsx | 8 ++------ static/js/utils/tile_utils.tsx | 20 +++++++++++++++++++- static/nodejs_server/bar_tile.ts | 9 ++------- static/nodejs_server/line_tile.ts | 4 +++- 4 files changed, 26 insertions(+), 15 deletions(-) diff --git a/static/js/components/subject_page/block.tsx b/static/js/components/subject_page/block.tsx index 2e5460cd21..89295769f0 100644 --- a/static/js/components/subject_page/block.tsx +++ b/static/js/components/subject_page/block.tsx @@ -27,7 +27,6 @@ import { COLUMN_ID_PREFIX, HIDE_COLUMN_CLASS, HIDE_TILE_CLASS, - SELF_PLACE_DCID_PLACEHOLDER, TILE_ID_PREFIX, } from "../../constants/subject_page_constants"; import { NamedPlace, NamedTypedPlace } from "../../shared/types"; @@ -41,6 +40,7 @@ import { getId, getMinTileIdxToHide, } from "../../utils/subject_page_utils"; +import { getComparisonPlaces } from "../../utils/tile_utils"; import { BarTile } from "../tiles/bar_tile"; import { BivariateTile } from "../tiles/bivariate_tile"; import { DonutTile } from "../tiles/donut_tile"; @@ -200,11 +200,7 @@ function renderTiles( const place = tile.placeDcidOverride ? overridePlaces[tile.placeDcidOverride] : props.place; - const comparisonPlaces = tile.comparisonPlaces - ? tile.comparisonPlaces.map((p) => - p == SELF_PLACE_DCID_PLACEHOLDER ? place.dcid : p - ) - : undefined; + const comparisonPlaces = getComparisonPlaces(tile, place); const className = classNameList.join(" "); switch (tile.type) { case "HIGHLIGHT": diff --git a/static/js/utils/tile_utils.tsx b/static/js/utils/tile_utils.tsx index 7ace96ce7b..0bac1425c2 100644 --- a/static/js/utils/tile_utils.tsx +++ b/static/js/utils/tile_utils.tsx @@ -24,6 +24,7 @@ import _ from "lodash"; import React from "react"; import { NL_SOURCE_REPLACEMENTS } from "../constants/app/nl_interface_constants"; +import { SELF_PLACE_DCID_PLACEHOLDER } from "../constants/subject_page_constants"; import { GA_EVENT_TILE_EXPLORE_MORE, GA_PARAM_URL, @@ -31,7 +32,7 @@ import { } from "../shared/ga_events"; import { PointApiResponse, SeriesApiResponse } from "../shared/stat_types"; import { getStatsVarLabel } from "../shared/stats_var_labels"; -import { StatVarSpec } from "../shared/types"; +import { NamedTypedPlace, StatVarSpec } from "../shared/types"; import { urlToDisplayText } from "../shared/util"; import { getMatchingObservation } from "../tools/shared_util"; import { EventTypeSpec, TileConfig } from "../types/subject_page_proto_types"; @@ -526,3 +527,20 @@ export function showError(errorMsg: string, container: HTMLDivElement): void { // Show error message in the container containerSelection.html(errorMsg); } + +/** + * Gets the list of comparison places to use + * @param tileConfig tile config to get comparison places from + * @param place the main place for the tile + */ +export function getComparisonPlaces( + tileConfig: TileConfig, + place: NamedTypedPlace +): string[] { + if (!tileConfig.comparisonPlaces) { + return undefined; + } + return tileConfig.comparisonPlaces.map((p) => + p == SELF_PLACE_DCID_PLACEHOLDER ? place.dcid : p + ); +} diff --git a/static/nodejs_server/bar_tile.ts b/static/nodejs_server/bar_tile.ts index 3e971333ff..13d5a79bb8 100644 --- a/static/nodejs_server/bar_tile.ts +++ b/static/nodejs_server/bar_tile.ts @@ -27,11 +27,10 @@ import { fetchData, getReplacementStrings, } from "../js/components/tiles/bar_tile"; -import { SELF_PLACE_DCID_PLACEHOLDER } from "../js/constants/subject_page_constants"; import { NamedTypedPlace, StatVarSpec } from "../js/shared/types"; import { TileConfig } from "../js/types/subject_page_proto_types"; import { dataGroupsToCsv } from "../js/utils/chart_csv_utils"; -import { getChartTitle } from "../js/utils/tile_utils"; +import { getChartTitle, getComparisonPlaces } from "../js/utils/tile_utils"; import { CHART_ID, DOM_ID, SVG_HEIGHT, SVG_WIDTH } from "./constants"; import { TileResult } from "./types"; import { getChartUrl, getProcessedSvg, getSources, getSvgXml } from "./utils"; @@ -44,11 +43,7 @@ function getTileProp( statVarSpec: StatVarSpec[], apiRoot: string ): BarTilePropType { - const comparisonPlaces = tileConfig.comparisonPlaces - ? tileConfig.comparisonPlaces.map((p) => - p == SELF_PLACE_DCID_PLACEHOLDER ? place.dcid : p - ) - : undefined; + const comparisonPlaces = getComparisonPlaces(tileConfig, place); const barTileSpec = tileConfig.barTileSpec || {}; return { id, diff --git a/static/nodejs_server/line_tile.ts b/static/nodejs_server/line_tile.ts index 19ab65e967..0a27045f82 100644 --- a/static/nodejs_server/line_tile.ts +++ b/static/nodejs_server/line_tile.ts @@ -28,7 +28,7 @@ import { import { NamedTypedPlace, StatVarSpec } from "../js/shared/types"; import { TileConfig } from "../js/types/subject_page_proto_types"; import { dataGroupsToCsv } from "../js/utils/chart_csv_utils"; -import { getChartTitle } from "../js/utils/tile_utils"; +import { getChartTitle, getComparisonPlaces } from "../js/utils/tile_utils"; import { CHART_ID, DOM_ID, SVG_HEIGHT, SVG_WIDTH } from "./constants"; import { TileResult } from "./types"; import { getChartUrl, getProcessedSvg, getSources, getSvgXml } from "./utils"; @@ -40,6 +40,7 @@ function getTileProp( statVarSpec: StatVarSpec[], apiRoot: string ): LineTilePropType { + const comparisonPlaces = getComparisonPlaces(tileConfig, place); return { apiRoot, id, @@ -48,6 +49,7 @@ function getTileProp( svgChartHeight: SVG_HEIGHT, svgChartWidth: SVG_WIDTH, title: tileConfig.title, + comparisonPlaces, }; }