From aaae2f992db3fc470bd6dc6968deda10231bbc57 Mon Sep 17 00:00:00 2001 From: Carolyn Au Date: Sat, 29 Jan 2022 00:06:35 -0800 Subject: [PATCH] [topic] add categories (#1427) Add categories (container of blocks) Formatting updates for that Add a left-hand nav menu Fix webdriver test Add provenance for bar charts Fix spacing for ranking charts Hide page selector (temporarily) Enable topic page in prod --- server/config/topic_page.proto | 8 +- server/config/topic_page/equity/USA.textproto | 977 +++++++++--------- .../config/topic_page/poverty/USA.textproto | 648 ++++++------ server/config/topic_page_pb2.py | 16 +- server/routes/topic_page.py | 3 - server/templates/topic_page.html | 26 +- server/templates/topic_page_landing.html | 3 +- .../tests/place_explorer_i18n_test.py | 2 +- static/css/shared/story_block.scss | 1 + static/css/topic_page.scss | 77 +- static/js/topic_page/bar_tile.tsx | 8 +- static/js/topic_page/block.tsx | 4 +- static/js/topic_page/category.tsx | 68 ++ static/js/topic_page/main_pane.tsx | 16 +- static/js/topic_page/page_selector.tsx | 8 +- static/js/topic_page/sidebar.tsx | 56 + static/js/topic_page/string_utils.ts | 4 + static/js/topic_page/topic_page.ts | 12 +- 18 files changed, 1099 insertions(+), 838 deletions(-) create mode 100644 static/js/topic_page/category.tsx create mode 100644 static/js/topic_page/sidebar.tsx diff --git a/server/config/topic_page.proto b/server/config/topic_page.proto index b3f4fbb5c1..3369d13e96 100644 --- a/server/config/topic_page.proto +++ b/server/config/topic_page.proto @@ -94,7 +94,13 @@ message Block { repeated StatVarMetadata stat_var_metadata = 5; } +message Category { + string title = 1; + string description = 2; + repeated Block blocks = 3; +} + message TopicPageConfig { PageMetadata metadata = 1; - repeated Block blocks = 2; + repeated Category categories = 2; } \ No newline at end of file diff --git a/server/config/topic_page/equity/USA.textproto b/server/config/topic_page/equity/USA.textproto index dcae98b640..7bc906197c 100644 --- a/server/config/topic_page/equity/USA.textproto +++ b/server/config/topic_page/equity/USA.textproto @@ -24,556 +24,585 @@ metadata { } } -blocks { - title: "Gini index of economic activity" - stat_var_metadata: { - stat_var: "GiniIndex_EconomicActivity" - name: "Gini index of economic activity" - } - left_tiles { - type: HIGHLIGHT - description: "Gini index of economic activity for ${place} (${date})" - } - left_tiles { - type: DESCRIPTION - description: "In economics, the Gini index is a measure of income inequality within a nation or social group. It measures the inequality among values of a frequency distribution (e.g. a Gini index of 0 represents perfect equality, while 100 represents perfect inequality)." - } - right_tiles: { - type: LINE - title: "Gini index of economic activity for ${place}" - } - # TODO: Add rankings of other /Countries/ -} +categories { + title: "Overview" -blocks { - title: "Health and poverty" - description: "Studies from CDC and others have shown a correlation between obesity and poverty. Unfortunately, many other medical conditions are inversely correlated with economic well being." - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" - denom: "Count_Person" - unit: "%" - scaling: 100 - name: "Poverty rate" - } - stat_var_metadata { - stat_var: "Count_Person_NoHealthInsurance" - denom: "Count_Person" - unit: "%" - scaling: 100 - name: "Uninsurance rate" - } - left_tiles { - type: SCATTER - title: "Poverty rate vs. Uninsurance rate" - } - right_tiles { - type: SCATTER - title: "Inflation adjusted GDP vs. Death from Covid-19" - stat_var_override { - stat_var: "InflationAdjustedGDP" - unit: "$" - name: "Inflation adjusted GDP" + blocks { + title: "Gini index of economic activity" + stat_var_metadata: { + stat_var: "GiniIndex_EconomicActivity" + name: "Gini index of economic activity" } - stat_var_override { - stat_var: "CumulativeCount_MedicalConditionIncident_COVID_19_PatientDeceased" - denom: "Count_Person" - unit: "%" - scaling: 100 - name: "Cumulative death from Covid-19" + left_tiles { + type: HIGHLIGHT + description: "Gini index of economic activity for ${place} (${date})" } - } - right_tiles { - type: SCATTER - title: "Poverty rate vs. Death from diseases of the circulatory system" - stat_var_override { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" - denom: "Count_Person" - unit: "%" - scaling: 100 - name: "Poverty rate" + left_tiles { + type: DESCRIPTION + description: "In economics, the Gini index is a measure of income inequality within a nation or social group. It measures the inequality among values of a frequency distribution (e.g. a Gini index of 0 represents perfect equality, while 100 represents perfect inequality)." } - stat_var_override { - stat_var: "Count_Death_DiseasesOfTheCirculatorySystem" - denom: "Count_Person" - unit: "%" - scaling: 100 - name: "Death from diseases of the circulatory system" + right_tiles: { + type: LINE + title: "Gini index of economic activity for ${place}" } + # TODO: Add rankings of other /Countries/ } - left_tiles { - type: SCATTER - title: "Poverty rate vs. Death from diseases of the digestive system" - stat_var_override { +} + +categories { + title: "Health" + + blocks { + title: "Health and poverty" + description: "Studies from CDC and others have shown a correlation between obesity and poverty. Unfortunately, many other medical conditions are inversely correlated with economic well being." + stat_var_metadata { stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" denom: "Count_Person" unit: "%" scaling: 100 name: "Poverty rate" } - stat_var_override { - stat_var: "Count_Death_DiseasesOfTheDigestiveSystem" + stat_var_metadata { + stat_var: "Count_Person_NoHealthInsurance" denom: "Count_Person" unit: "%" scaling: 100 - name: "Death from diseases of the digestive system per capita" + name: "Uninsurance rate" + } + left_tiles { + type: SCATTER + title: "Poverty rate vs. Uninsurance rate" + } + right_tiles { + type: SCATTER + title: "Inflation adjusted GDP vs. Death from Covid-19" + stat_var_override { + stat_var: "InflationAdjustedGDP" + unit: "$" + name: "Inflation adjusted GDP" + } + stat_var_override { + stat_var: "CumulativeCount_MedicalConditionIncident_COVID_19_PatientDeceased" + denom: "Count_Person" + unit: "%" + scaling: 100 + name: "Cumulative death from Covid-19" + } + } + right_tiles { + type: SCATTER + title: "Poverty rate vs. Death from diseases of the circulatory system" + stat_var_override { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" + denom: "Count_Person" + unit: "%" + scaling: 100 + name: "Poverty rate" + } + stat_var_override { + stat_var: "Count_Death_DiseasesOfTheCirculatorySystem" + denom: "Count_Person" + unit: "%" + scaling: 100 + name: "Death from diseases of the circulatory system" + } + } + left_tiles { + type: SCATTER + title: "Poverty rate vs. Death from diseases of the digestive system" + stat_var_override { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" + denom: "Count_Person" + unit: "%" + scaling: 100 + name: "Poverty rate" + } + stat_var_override { + stat_var: "Count_Death_DiseasesOfTheDigestiveSystem" + denom: "Count_Person" + unit: "%" + scaling: 100 + name: "Death from diseases of the digestive system per capita" + } } } } -blocks { - title: "Income inequality between sexes" - description: "Income inequality is computed as the ratio of the difference between median income for each sex, with the combined median incomes. A value of 0 means complete equality of median income." - stat_var_metadata { - stat_var: "GenderIncomeInequality_Person_15OrMoreYears_WithIncome" - name: "Income inequality between sexes" - } - left_tiles { - type: MAP - title: "Income inequality between sexes (${date})" - } - right_tiles { - type: RANKING - ranking_metadata { - show_highest: true - show_lowest: true +categories { + title: "Equity between sexes" + blocks { + title: "Income inequality between sexes" + description: "Income inequality is computed as the ratio of the difference between median income for each sex, with the combined median incomes. A value of 0 means complete equality of median income." + stat_var_metadata { + stat_var: "GenderIncomeInequality_Person_15OrMoreYears_WithIncome" + name: "Income inequality between sexes" + } + left_tiles { + type: MAP + title: "Income inequality between sexes (${date})" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + show_lowest: true + } } } -} -blocks { - title: "Income and employment, by sex" - description: "Median incomes of individuals, broken down by sex" - stat_var_metadata { - stat_var: "Median_Income_Person_15OrMoreYears_Female_WithIncome" - unit: "$" - } - stat_var_metadata { - stat_var: "Median_Income_Person_15OrMoreYears_Male_WithIncome" - unit: "$" - } - left_tiles { - title: "Median income by sex" - type: LINE - } - right_tiles { - title: "Unemployment rate by sex" - type: LINE - stat_var_override { - stat_var: "UnemploymentRate_Person_Female" - unit: "%" + blocks { + title: "Income and employment, by sex" + description: "Median incomes of individuals, broken down by sex" + stat_var_metadata { + stat_var: "Median_Income_Person_15OrMoreYears_Female_WithIncome" + unit: "$" } - stat_var_override { - stat_var: "UnemploymentRate_Person_Male" - unit: "%" + stat_var_metadata { + stat_var: "Median_Income_Person_15OrMoreYears_Male_WithIncome" + unit: "$" + } + left_tiles { + title: "Median income by sex" + type: LINE } + right_tiles { + title: "Unemployment rate by sex" + type: LINE + stat_var_override { + stat_var: "UnemploymentRate_Person_Female" + unit: "%" + } + stat_var_override { + stat_var: "UnemploymentRate_Person_Male" + unit: "%" + } + } + # There is only state-level data for Median Income, not unemployment rate. } - # There is only state-level data for Median Income, not unemployment rate. -} -blocks { - title: "Poverty rate, by sex" - description: "Percentage of the population living below the poverty level, broken down by sex." - stat_var_metadata { - stat_var: "Count_Person_Female_BelowPovertyLevelInThePast12Months" - denom: "Count_Person_BelowPovertyLevelInThePast12Months" - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_Male_BelowPovertyLevelInThePast12Months" - denom: "Count_Person_BelowPovertyLevelInThePast12Months" - unit: "%" - } - left_tiles { - type: LINE + blocks { title: "Poverty rate, by sex" - } - left_tiles { - type: RANKING - ranking_metadata { - show_highest: true + description: "Percentage of the population living below the poverty level, broken down by sex." + stat_var_metadata { + stat_var: "Count_Person_Female_BelowPovertyLevelInThePast12Months" + denom: "Count_Person_BelowPovertyLevelInThePast12Months" + unit: "%" } - } - right_tiles { - type: MAP - title: "Percentage of the population in poverty who are female (${date})" - } - right_tiles { - type: MAP - title: "Percentage of the population in poverty who are male (${date})" - stat_var_override { + stat_var_metadata { stat_var: "Count_Person_Male_BelowPovertyLevelInThePast12Months" denom: "Count_Person_BelowPovertyLevelInThePast12Months" unit: "%" } + left_tiles { + type: MAP + title: "Percentage of the population in poverty who are female (${date})" + } + right_tiles { + type: MAP + title: "Percentage of the population in poverty who are male (${date})" + stat_var_override { + stat_var: "Count_Person_Male_BelowPovertyLevelInThePast12Months" + denom: "Count_Person_BelowPovertyLevelInThePast12Months" + unit: "%" + } + } + left_tiles { + type: LINE + title: "Poverty rate, by sex" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + } + } } -} -blocks { - title: "Uninsured, by sex" - description: "Of those without insurance, how many are male or female?" - stat_var_metadata { - stat_var: "Count_Person_Female_NoHealthInsurance" - denom: "Count_Person_NoHealthInsurance" - unit: "%" - scaling: 100 - name: "Female, uninsured" - } - stat_var_metadata { - stat_var: "Count_Person_Male_NoHealthInsurance" - denom: "Count_Person_NoHealthInsurance" - unit: "%" - scaling: 100 - name: "Male, uninsured" - } - # TODO(beets): This isn't available at the country level - # stat_var_metadata { - # stat_var: "Count_Person_Female_WithHealthInsurance" - # denom: "Count_Person_Female" - # unit: "%" - # scaling: 100 - # name: "Female, insured" - # } - # stat_var_metadata { - # stat_var: "Count_Person_Male_WithHealthInsurance" - # denom: "Count_Person_Male" - # unit: "%" - # scaling: 100 - # name: "Male, insured" - # } - right_tiles { - type: LINE + blocks { title: "Uninsured, by sex" - } - left_tiles { - type: HIGHLIGHT - stat_var_override { - stat_var: "Count_Person_NoHealthInsurance" + description: "Of those without insurance, how many are male or female?" + stat_var_metadata { + stat_var: "Count_Person_Female_NoHealthInsurance" + denom: "Count_Person_NoHealthInsurance" + unit: "%" + scaling: 100 + name: "Female, uninsured" } - description: "Americans have no health insurance (${date})" - } - left_tiles { - type: RANKING - ranking_metadata { - show_highest: true + stat_var_metadata { + stat_var: "Count_Person_Male_NoHealthInsurance" + denom: "Count_Person_NoHealthInsurance" + unit: "%" + scaling: 100 + name: "Male, uninsured" + } + # TODO(beets): This isn't available at the country level + # stat_var_metadata { + # stat_var: "Count_Person_Female_WithHealthInsurance" + # denom: "Count_Person_Female" + # unit: "%" + # scaling: 100 + # name: "Female, insured" + # } + # stat_var_metadata { + # stat_var: "Count_Person_Male_WithHealthInsurance" + # denom: "Count_Person_Male" + # unit: "%" + # scaling: 100 + # name: "Male, insured" + # } + right_tiles { + type: LINE + title: "Uninsured, by sex" + } + left_tiles { + type: HIGHLIGHT + stat_var_override { + stat_var: "Count_Person_NoHealthInsurance" + } + description: "Americans have no health insurance (${date})" + } + left_tiles { + type: RANKING + ranking_metadata { + show_highest: true + } } } -} -blocks { - title: "Education attainment by sex: Associate's degree" - stat_var_metadata { - stat_var: "Count_Person_25To34Years_EducationalAttainmentAssociatesDegree_Female" - denom: "Count_Person_25To34Years_Female" - unit: "%" - scaling: 100 - name: "Female" - } - stat_var_metadata { - stat_var: "Count_Person_25To34Years_EducationalAttainmentAssociatesDegree_Male" - denom: "Count_Person_25To34Years_Male" - unit: "%" - scaling: 100 - name: "Male" - } - left_tiles { - type: LINE - title: "Associate's degree holders by sex" - } - right_tiles { - type: RANKING - ranking_metadata { - show_highest: true - show_lowest: true + blocks { + title: "Education attainment by sex: Associate's degree" + stat_var_metadata { + stat_var: "Count_Person_25To34Years_EducationalAttainmentAssociatesDegree_Female" + denom: "Count_Person_25To34Years_Female" + unit: "%" + scaling: 100 + name: "Female" + } + stat_var_metadata { + stat_var: "Count_Person_25To34Years_EducationalAttainmentAssociatesDegree_Male" + denom: "Count_Person_25To34Years_Male" + unit: "%" + scaling: 100 + name: "Male" + } + left_tiles { + type: LINE + title: "Associate's degree holders by sex" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + show_lowest: true + } } } -} -blocks { - title: "Education attainment by sex: Bachelors's degree" - stat_var_metadata { - stat_var: "Count_Person_25To34Years_EducationalAttainmentBachelorsDegree_Female" - denom: "Count_Person_25To34Years_Female" - unit: "%" - scaling: 100 - name: "Female" - } - stat_var_metadata { - stat_var: "Count_Person_25To34Years_EducationalAttainmentBachelorsDegree_Male" - denom: "Count_Person_25To34Years_Male" - unit: "%" - scaling: 100 - name: "Male" - } - left_tiles { - type: RANKING - ranking_metadata { - show_highest: true - show_lowest: true + blocks { + title: "Education attainment by sex: Bachelors's degree" + stat_var_metadata { + stat_var: "Count_Person_25To34Years_EducationalAttainmentBachelorsDegree_Female" + denom: "Count_Person_25To34Years_Female" + unit: "%" + scaling: 100 + name: "Female" + } + stat_var_metadata { + stat_var: "Count_Person_25To34Years_EducationalAttainmentBachelorsDegree_Male" + denom: "Count_Person_25To34Years_Male" + unit: "%" + scaling: 100 + name: "Male" + } + left_tiles { + type: RANKING + ranking_metadata { + show_highest: true + show_lowest: true + } + } + right_tiles { + title: "Bachelor's degree holders by sex" + type: LINE } } - right_tiles { - title: "Bachelor's degree holders by sex" - type: LINE - } -} -blocks { - title: "Education attainment by sex: Graduate or professional degree" - stat_var_metadata { - stat_var: "Count_Person_25To34Years_EducationalAttainmentGraduateOrProfessionalDegree_Female" - denom: "Count_Person_25To34Years_Female" - unit: "%" - scaling: 100 - name: "Female" - } - stat_var_metadata { - stat_var: "Count_Person_25To34Years_EducationalAttainmentGraduateOrProfessionalDegree_Male" - denom: "Count_Person_25To34Years_Male" - unit: "%" - scaling: 100 - name: "Male" - } - left_tiles { - type: LINE - title: "Graduate or professional degree holders by sex" - } - right_tiles { - type: RANKING - ranking_metadata { - show_highest: true - show_lowest: true + blocks { + title: "Education attainment by sex: Graduate or professional degree" + stat_var_metadata { + stat_var: "Count_Person_25To34Years_EducationalAttainmentGraduateOrProfessionalDegree_Female" + denom: "Count_Person_25To34Years_Female" + unit: "%" + scaling: 100 + name: "Female" + } + stat_var_metadata { + stat_var: "Count_Person_25To34Years_EducationalAttainmentGraduateOrProfessionalDegree_Male" + denom: "Count_Person_25To34Years_Male" + unit: "%" + scaling: 100 + name: "Male" + } + left_tiles { + type: MAP + title: "Percentage of females who are graduate or professional degree holders" + } + right_tiles { + type: MAP + title: "Percentage of males who are graduate or professional degree holders" + stat_var_override { + stat_var: "Count_Person_25To34Years_EducationalAttainmentGraduateOrProfessionalDegree_Male" + denom: "Count_Person_25To34Years_Male" + unit: "%" + scaling: 100 + name: "Male" + } + } + left_tiles { + type: LINE + title: "Graduate or professional degree holders by sex" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + show_lowest: true + } } } } -# TODO: Not available at the country level -# blocks { -# title: "Median income, by race" -# description: "Median incomes of households, broken down by race" -# stat_var_metadata { -# stat_var: "Median_Income_Household_HouseholderRaceAmericanIndianOrAlaskaNativeAlone" -# unit: "$" -# } -# stat_var_metadata { -# stat_var: "Median_Income_Household_HouseholderRaceAmericanIndianOrAlaskaNativeAlone" -# unit: "$" -# } -# stat_var_metadata { -# stat_var: "Median_Income_Household_HouseholderRaceAsianAlone" -# unit: "$" -# } -# stat_var_metadata { -# stat_var: "Median_Income_Household_HouseholderRaceBlackOrAfricanAmericanAlone" -# unit: "$" -# } -# stat_var_metadata { -# stat_var: "Median_Income_Household_HouseholderRaceHispanicOrLatino" -# unit: "$" -# } -# stat_var_metadata { -# stat_var: "Median_Income_Household_HouseholderRaceNativeHawaiianOrOtherPacificIslanderAlone" -# unit: "$" -# } -# stat_var_metadata { -# stat_var: "Median_Income_Household_HouseholderRaceWhiteAlone" -# unit: "$" -# } -# left_tiles { -# type: LINE -# title: "Median household income by race" -# } -# right_tiles { -# type: RANKING -# ranking_metadata { -# show_highest: true -# } -# } -# } +categories { + title: "Equity between races" + # TODO: Not available at the country level + # blocks { + # title: "Median income, by race" + # description: "Median incomes of households, broken down by race" + # stat_var_metadata { + # stat_var: "Median_Income_Household_HouseholderRaceAmericanIndianOrAlaskaNativeAlone" + # unit: "$" + # } + # stat_var_metadata { + # stat_var: "Median_Income_Household_HouseholderRaceAmericanIndianOrAlaskaNativeAlone" + # unit: "$" + # } + # stat_var_metadata { + # stat_var: "Median_Income_Household_HouseholderRaceAsianAlone" + # unit: "$" + # } + # stat_var_metadata { + # stat_var: "Median_Income_Household_HouseholderRaceBlackOrAfricanAmericanAlone" + # unit: "$" + # } + # stat_var_metadata { + # stat_var: "Median_Income_Household_HouseholderRaceHispanicOrLatino" + # unit: "$" + # } + # stat_var_metadata { + # stat_var: "Median_Income_Household_HouseholderRaceNativeHawaiianOrOtherPacificIslanderAlone" + # unit: "$" + # } + # stat_var_metadata { + # stat_var: "Median_Income_Household_HouseholderRaceWhiteAlone" + # unit: "$" + # } + # left_tiles { + # type: LINE + # title: "Median household income by race" + # } + # right_tiles { + # type: RANKING + # ranking_metadata { + # show_highest: true + # } + # } + # } -blocks { - title: "Median household income by race" - stat_var_metadata { - stat_var: "Median_Income_Household_HouseholderRaceAmericanIndianOrAlaskaNativeAlone" - unit: "$" - name: "American Indian or Alaska Native" - } - stat_var_metadata { - stat_var: "Median_Income_Household_HouseholderRaceAsianAlone" - unit: "$" - name: "Asian" - } - stat_var_metadata { - stat_var: "Median_Income_Household_HouseholderRaceBlackOrAfricanAmericanAlone" - unit: "$" - name: "Black or African American" - } - stat_var_metadata { - stat_var: "Median_Income_Household_HouseholderRaceHispanicOrLatino" - unit: "$" - name: "Hispanic or Latino" - } - stat_var_metadata { - stat_var: "Median_Income_Household_HouseholderRaceNativeHawaiianOrOtherPacificIslanderAlone" - unit: "$" - name: "Native Hawaiian or Pacific Islander" - } - stat_var_metadata { - stat_var: "Median_Income_Household_HouseholderRaceWhiteAlone" - unit: "$" - name: "White" - } - # TODO: This data is not available at the country level! - left_tiles { - type: BAR + blocks { title: "Median household income by race" - } - right_tiles { - type: RANKING - ranking_metadata { - show_highest: true - highest_title: "Highest among ${statVar}" + stat_var_metadata { + stat_var: "Median_Income_Household_HouseholderRaceAmericanIndianOrAlaskaNativeAlone" + unit: "$" + name: "American Indian or Alaska Native" + } + stat_var_metadata { + stat_var: "Median_Income_Household_HouseholderRaceAsianAlone" + unit: "$" + name: "Asian" + } + stat_var_metadata { + stat_var: "Median_Income_Household_HouseholderRaceBlackOrAfricanAmericanAlone" + unit: "$" + name: "Black or African American" + } + stat_var_metadata { + stat_var: "Median_Income_Household_HouseholderRaceHispanicOrLatino" + unit: "$" + name: "Hispanic or Latino" + } + stat_var_metadata { + stat_var: "Median_Income_Household_HouseholderRaceNativeHawaiianOrOtherPacificIslanderAlone" + unit: "$" + name: "Native Hawaiian or Pacific Islander" + } + stat_var_metadata { + stat_var: "Median_Income_Household_HouseholderRaceWhiteAlone" + unit: "$" + name: "White" + } + # TODO: This data is not available at the country level! + left_tiles { + type: BAR + title: "Median household income by race" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + highest_title: "Highest among ${statVar}" + } } } -} -blocks { - title: "Poverty rate by race" - description: "Percentage of the population of each race living in poverty" - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AmericanIndianOrAlaskaNativeAlone" - denom: "Count_Person_AmericanIndianOrAlaskaNativeAlone" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AsianAlone" - denom: "Count_Person_AsianAlone" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_BlackOrAfricanAmericanAlone" - denom: "Count_Person_BlackOrAfricanAmericanAlone" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_HispanicOrLatino" - denom: "Count_Person_HispanicOrLatino" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_NativeHawaiianOrOtherPacificIslanderAlone" - denom: "Count_Person_NativeHawaiianOrOtherPacificIslanderAlone" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_WhiteAlone" - denom: "Count_Person_WhiteAlone" - scaling: 100 - unit: "%" - } - left_tiles { - type: LINE - title: "Poverty rate by race in ${place}" - } - right_tiles { - type: RANKING - ranking_metadata { - show_highest: true - highest_title: "Highest among ${statVar}" + blocks { + title: "Poverty rate by race" + description: "Percentage of the population of each race living in poverty" + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AmericanIndianOrAlaskaNativeAlone" + denom: "Count_Person_AmericanIndianOrAlaskaNativeAlone" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AsianAlone" + denom: "Count_Person_AsianAlone" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_BlackOrAfricanAmericanAlone" + denom: "Count_Person_BlackOrAfricanAmericanAlone" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_HispanicOrLatino" + denom: "Count_Person_HispanicOrLatino" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_NativeHawaiianOrOtherPacificIslanderAlone" + denom: "Count_Person_NativeHawaiianOrOtherPacificIslanderAlone" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_WhiteAlone" + denom: "Count_Person_WhiteAlone" + scaling: 100 + unit: "%" + } + left_tiles { + type: LINE + title: "Poverty rate by race in ${place}" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + highest_title: "Highest among ${statVar}" + } } } -} -blocks { - title: "Correctional facility residents by race" - # TODO(beets): investigate high numbes for this - # stat_var_metadata { - # stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AmericanIndianOrAlaskaNativeAlone" - # denom: "Count_Person_ResidesInJuvenileFacilities" - # scaling: 100 - # unit: "%" - # name: "American Indian or Alaska Native" - # } - stat_var_metadata { - stat_var: "Count_Person_AsianAlone_ResidesInJuvenileFacilities" - denom: "Count_Person_ResidesInJuvenileFacilities" - scaling: 100 - unit: "%" - name: "Asian" - } - stat_var_metadata { - stat_var: "Count_Person_BlackOrAfricanAmericanAlone_ResidesInJuvenileFacilities" - denom: "Count_Person_ResidesInJuvenileFacilities" - scaling: 100 - unit: "%" - name: "Black or African American" - } - stat_var_metadata { - stat_var: "Count_Person_HispanicOrLatino_ResidesInJuvenileFacilities" - denom: "Count_Person_ResidesInJuvenileFacilities" - scaling: 100 - unit: "%" - name: "Hispanic or Latino" - } - stat_var_metadata { - stat_var: "Count_Person_NativeHawaiianOrOtherPacificIslanderAlone_ResidesInJuvenileFacilities" - denom: "Count_Person_ResidesInJuvenileFacilities" - scaling: 100 - unit: "%" - name: "Native Hawaiian or Pacific Islander" - } - stat_var_metadata { - stat_var: "Count_Person_WhiteAlone_ResidesInJuvenileFacilities" - denom: "Count_Person_ResidesInJuvenileFacilities" - scaling: 100 - unit: "%" - name: "White" - } - left_tiles { - title: "Racial breakdown of juvenile facility residents" - type: LINE - } - right_tiles { - title: "Racial breakdown of adult correctional facility residents" - type: LINE - stat_var_override { - stat_var: "Count_Person_AsianAlone_ResidesInAdultCorrectionalFacilities" - denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + blocks { + title: "Correctional facility residents by race" + # TODO(beets): investigate high numbes for this + # stat_var_metadata { + # stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AmericanIndianOrAlaskaNativeAlone" + # denom: "Count_Person_ResidesInJuvenileFacilities" + # scaling: 100 + # unit: "%" + # name: "American Indian or Alaska Native" + # } + stat_var_metadata { + stat_var: "Count_Person_AsianAlone_ResidesInJuvenileFacilities" + denom: "Count_Person_ResidesInJuvenileFacilities" scaling: 100 unit: "%" name: "Asian" } - stat_var_override { - stat_var: "Count_Person_BlackOrAfricanAmericanAlone_ResidesInAdultCorrectionalFacilities" - denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + stat_var_metadata { + stat_var: "Count_Person_BlackOrAfricanAmericanAlone_ResidesInJuvenileFacilities" + denom: "Count_Person_ResidesInJuvenileFacilities" scaling: 100 unit: "%" name: "Black or African American" } - stat_var_override { - stat_var: "Count_Person_HispanicOrLatino_ResidesInAdultCorrectionalFacilities" - denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + stat_var_metadata { + stat_var: "Count_Person_HispanicOrLatino_ResidesInJuvenileFacilities" + denom: "Count_Person_ResidesInJuvenileFacilities" scaling: 100 unit: "%" name: "Hispanic or Latino" } - stat_var_override { - stat_var: "Count_Person_NativeHawaiianOrOtherPacificIslanderAlone_ResidesInAdultCorrectionalFacilities" - denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + stat_var_metadata { + stat_var: "Count_Person_NativeHawaiianOrOtherPacificIslanderAlone_ResidesInJuvenileFacilities" + denom: "Count_Person_ResidesInJuvenileFacilities" scaling: 100 unit: "%" name: "Native Hawaiian or Pacific Islander" } - stat_var_override { - stat_var: "Count_Person_WhiteAlone_ResidesInAdultCorrectionalFacilities" - denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + stat_var_metadata { + stat_var: "Count_Person_WhiteAlone_ResidesInJuvenileFacilities" + denom: "Count_Person_ResidesInJuvenileFacilities" scaling: 100 unit: "%" name: "White" } + left_tiles { + title: "Racial breakdown of juvenile facility residents" + type: LINE + } + right_tiles { + title: "Racial breakdown of adult correctional facility residents" + type: LINE + stat_var_override { + stat_var: "Count_Person_AsianAlone_ResidesInAdultCorrectionalFacilities" + denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + scaling: 100 + unit: "%" + name: "Asian" + } + stat_var_override { + stat_var: "Count_Person_BlackOrAfricanAmericanAlone_ResidesInAdultCorrectionalFacilities" + denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + scaling: 100 + unit: "%" + name: "Black or African American" + } + stat_var_override { + stat_var: "Count_Person_HispanicOrLatino_ResidesInAdultCorrectionalFacilities" + denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + scaling: 100 + unit: "%" + name: "Hispanic or Latino" + } + stat_var_override { + stat_var: "Count_Person_NativeHawaiianOrOtherPacificIslanderAlone_ResidesInAdultCorrectionalFacilities" + denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + scaling: 100 + unit: "%" + name: "Native Hawaiian or Pacific Islander" + } + stat_var_override { + stat_var: "Count_Person_WhiteAlone_ResidesInAdultCorrectionalFacilities" + denom: "Count_Person_ResidesInAdultCorrectionalFacilities" + scaling: 100 + unit: "%" + name: "White" + } + } } } \ No newline at end of file diff --git a/server/config/topic_page/poverty/USA.textproto b/server/config/topic_page/poverty/USA.textproto index c25b35e5af..917999107f 100644 --- a/server/config/topic_page/poverty/USA.textproto +++ b/server/config/topic_page/poverty/USA.textproto @@ -20,356 +20,362 @@ metadata { place_dcid: 'country/USA' } -blocks { - description: "In the US, the Census Bureau uses a set of money income thresholds that vary by family size and composition to determine who is in poverty. If a family's total income is less than the family's threshold, then that family and every individual in it is considered in poverty. (US Census)" - stat_var_metadata: { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" - denom: "Count_Person" - unit: "%" - scaling: 100 - name: "Poverty rate" - } - left_tiles: { - type: HIGHLIGHT - description: "of Americans lived under the poverty line (${date})" - } - right_tiles: { - type: LINE - title: "Poverty rate in ${place}" - } -} - -blocks { - title: "Poverty across states" - description: "Poverty thresholds are uniform across the country. There is a big range in terms of the percentage of the population who live in poverty (9 - 44%). Looking at the total number of people in poverty though, the rankings closely match state populations." - stat_var_metadata: { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" - denom: "Count_Person" - unit: "%" - scaling: 100 - name: "Poverty rate" - } - left_tiles { - type: MAP - title: "Poverty rate across states (${date})" - } - right_tiles { - type: RANKING - ranking_metadata { - show_highest: true - highest_title: "Highest by poverty rate" - show_lowest: true - lowest_title: "Lowest by poverty rate" +categories { + title: "Individual poverty" + blocks { + description: "In the US, the Census Bureau uses a set of money income thresholds that vary by family size and composition to determine who is in poverty. If a family's total income is less than the family's threshold, then that family and every individual in it is considered in poverty. (US Census)" + stat_var_metadata: { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" + denom: "Count_Person" + unit: "%" + scaling: 100 + name: "Poverty rate" + } + left_tiles: { + type: HIGHLIGHT + description: "of Americans lived under the poverty line (${date})" + } + right_tiles: { + type: LINE + title: "Poverty rate in ${place}" } } - right_tiles { - type: RANKING - stat_var_override { + + blocks { + title: "Poverty across states" + description: "Poverty thresholds are uniform across the country. There is a big range in terms of the percentage of the population who live in poverty (9 - 44%). Looking at the total number of people in poverty though, the rankings closely match state populations." + stat_var_metadata: { stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" - name: "people in poverty" + denom: "Count_Person" + unit: "%" + scaling: 100 + name: "Poverty rate" + } + left_tiles { + type: MAP + title: "Poverty rate across states (${date})" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + highest_title: "Highest by poverty rate" + show_lowest: true + lowest_title: "Lowest by poverty rate" + } } - ranking_metadata { - show_highest: true - highest_title: "Most ${statVar}" - show_lowest: true - lowest_title: "Fewest ${statVar}" + right_tiles { + type: RANKING + stat_var_override { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months" + name: "people in poverty" + } + ranking_metadata { + show_highest: true + highest_title: "Most ${statVar}" + show_lowest: true + lowest_title: "Fewest ${statVar}" + } } } -} -blocks { - title: "Poverty rate by sex" - stat_var_metadata { - stat_var: "Count_Person_Female_BelowPovertyLevelInThePast12Months" - denom: "Count_Person_Female" - unit: "%" - scaling: 100 - name: "females" - } - stat_var_metadata { - stat_var: "Count_Person_Male_BelowPovertyLevelInThePast12Months" - denom: "Count_Person_Male" - unit: "%" - scaling: 100 - name: "males" - } - left_tiles { - type: LINE - title: "Poverty rate by sex in ${place}" - } - right_tiles { - type: RANKING - ranking_metadata { - show_highest: true - show_lowest: true - highest_title: "Most ${statVar} in poverty" - lowest_title: "Least ${statVar} in poverty" + blocks { + title: "Poverty rate by sex" + stat_var_metadata { + stat_var: "Count_Person_Female_BelowPovertyLevelInThePast12Months" + denom: "Count_Person_Female" + unit: "%" + scaling: 100 + name: "females" + } + stat_var_metadata { + stat_var: "Count_Person_Male_BelowPovertyLevelInThePast12Months" + denom: "Count_Person_Male" + unit: "%" + scaling: 100 + name: "males" + } + left_tiles { + type: LINE + title: "Poverty rate by sex in ${place}" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + show_lowest: true + highest_title: "Most ${statVar} in poverty" + lowest_title: "Least ${statVar} in poverty" + } } } -} -blocks { - title: "Poverty rate by race" - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AmericanIndianOrAlaskaNativeAlone" - denom: "Count_Person_AmericanIndianOrAlaskaNativeAlone" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AsianAlone" - denom: "Count_Person_AsianAlone" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_BlackOrAfricanAmericanAlone" - denom: "Count_Person_BlackOrAfricanAmericanAlone" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_HispanicOrLatino" - denom: "Count_Person_HispanicOrLatino" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_NativeHawaiianOrOtherPacificIslanderAlone" - denom: "Count_Person_NativeHawaiianOrOtherPacificIslanderAlone" - scaling: 100 - unit: "%" - } - stat_var_metadata { - stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_WhiteAlone" - denom: "Count_Person_WhiteAlone" - scaling: 100 - unit: "%" - } - left_tiles { - type: LINE - title: "Poverty rate by race in ${place}" - } - right_tiles { - type: RANKING - ranking_metadata { - show_highest: true - highest_title: "Highest among ${statVar}" + blocks { + title: "Poverty rate by race" + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AmericanIndianOrAlaskaNativeAlone" + denom: "Count_Person_AmericanIndianOrAlaskaNativeAlone" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_AsianAlone" + denom: "Count_Person_AsianAlone" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_BlackOrAfricanAmericanAlone" + denom: "Count_Person_BlackOrAfricanAmericanAlone" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_HispanicOrLatino" + denom: "Count_Person_HispanicOrLatino" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_NativeHawaiianOrOtherPacificIslanderAlone" + denom: "Count_Person_NativeHawaiianOrOtherPacificIslanderAlone" + scaling: 100 + unit: "%" + } + stat_var_metadata { + stat_var: "Count_Person_BelowPovertyLevelInThePast12Months_WhiteAlone" + denom: "Count_Person_WhiteAlone" + scaling: 100 + unit: "%" + } + left_tiles { + type: LINE + title: "Poverty rate by race in ${place}" + } + right_tiles { + type: RANKING + ranking_metadata { + show_highest: true + highest_title: "Highest among ${statVar}" + } } } } -blocks { +categories { title: "Families in poverty" - stat_var_metadata { - stat_var: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" - denom: "Count_Household_FamilyHousehold" - scaling: 100 - unit: "%" - } - left_tiles: { - type: HIGHLIGHT - description: "of American families lived under the poverty line (${date})" - } - left_tiles { - type: MAP - title: "" - } - right_tiles: { - type: LINE - title: "Poverty rate in ${place}" + blocks { + title: "Families in poverty" + stat_var_metadata { + stat_var: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" + denom: "Count_Household_FamilyHousehold" + scaling: 100 + unit: "%" + } + left_tiles: { + type: HIGHLIGHT + description: "of American families lived under the poverty line (${date})" + } + left_tiles { + type: MAP + title: "" + } + right_tiles: { + type: LINE + title: "Poverty rate in ${place}" + } } -} -blocks { - title: "Households in poverty by work status" - stat_var_metadata { - stat_var: "Count_Household_FullTimeYearRoundWorker_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "All Family Households" - denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - } - stat_var_metadata { - stat_var: "Count_Household_FullTimeYearRoundWorker_MarriedCoupleFamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "Households with Married Couple" - denom: "Count_Household_MarriedCoupleFamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - } - stat_var_metadata { - stat_var: "Count_Household_FullTimeYearRoundWorker_SingleMotherFamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "Households with Single Mother" - denom: "Count_Household_SingleMotherFamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - } - left_tiles { - title: "Percentage of households in poverty with full time year round workers (${date})" - type: MAP - } - right_tiles { - title: "Percentage of households in poverty with full time year round workers" - type: LINE + blocks { + title: "Households in poverty by work status" + stat_var_metadata { + stat_var: "Count_Household_FullTimeYearRoundWorker_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "All Family Households" + denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + } + stat_var_metadata { + stat_var: "Count_Household_FullTimeYearRoundWorker_MarriedCoupleFamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "Households with Married Couple" + denom: "Count_Household_MarriedCoupleFamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + } + stat_var_metadata { + stat_var: "Count_Household_FullTimeYearRoundWorker_SingleMotherFamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "Households with Single Mother" + denom: "Count_Household_SingleMotherFamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + } + left_tiles { + title: "Percentage of households in poverty with full time year round workers (${date})" + type: MAP + } + right_tiles { + title: "Percentage of households in poverty with full time year round workers" + type: LINE + } } -} -blocks { - title: "Households in poverty by number of children" - stat_var_metadata { - stat_var: "Count_Household_Householder0OwnChildren_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "No children" - } - stat_var_metadata { - stat_var: "Count_Household_Householder1To2OwnChildren_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "1-2 children" - } - stat_var_metadata { - stat_var: "Count_Household_Householder3To4OwnChildren_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "3-4 children" - } - stat_var_metadata { - stat_var: "Count_Household_Householder5OrMoreOwnChildren_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "5+ children" - } - left_tiles { - type: LINE - title: "Number of households in poverty by number of children" - } - right_tiles { - title: "" - type: RANKING - ranking_metadata { - show_highest: true - highest_title: "Highest: ${statVar}" + blocks { + title: "Households in poverty by number of children" + stat_var_metadata { + stat_var: "Count_Household_Householder0OwnChildren_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "No children" + } + stat_var_metadata { + stat_var: "Count_Household_Householder1To2OwnChildren_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "1-2 children" + } + stat_var_metadata { + stat_var: "Count_Household_Householder3To4OwnChildren_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "3-4 children" + } + stat_var_metadata { + stat_var: "Count_Household_Householder5OrMoreOwnChildren_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "5+ children" + } + left_tiles { + type: LINE + title: "Number of households in poverty by number of children" + } + right_tiles { + title: "" + type: RANKING + ranking_metadata { + show_highest: true + highest_title: "Highest: ${statVar}" + } } } -} -# TODO(beets): The charts here would be better as percentages, but there is no denominator: Count_Household_BelowPovertyLevelInThePast12Months -blocks { - title: "Food assistance for households below poverty" - description: "Number of households living under the poverty level and receiving food stamps in the last 12 months." - stat_var_metadata { - stat_var: "Count_Household_WithFoodStampsInThePast12Months_BelowPovertyLevelInThePast12Months" - } - left_tiles { - type: MAP - title: "Number of households in poverty receiving food stamps (${date})" - } - right_tiles { - type: MAP - title: "Number of households in poverty without food stamps (${date})" - stat_var_override { - stat_var: "Count_Household_WithoutFoodStampsInThePast12Months_BelowPovertyLevelInThePast12Months" + # TODO(beets): The charts here would be better as percentages, but there is no denominator: Count_Household_BelowPovertyLevelInThePast12Months + blocks { + title: "Food assistance for households below poverty" + description: "Number of households living under the poverty level and receiving food stamps in the last 12 months." + stat_var_metadata { + stat_var: "Count_Household_WithFoodStampsInThePast12Months_BelowPovertyLevelInThePast12Months" + } + left_tiles { + type: MAP + title: "Number of households in poverty receiving food stamps (${date})" + } + right_tiles { + type: MAP + title: "Number of households in poverty without food stamps (${date})" + stat_var_override { + stat_var: "Count_Household_WithoutFoodStampsInThePast12Months_BelowPovertyLevelInThePast12Months" + } } } -} -blocks { - title: "Social security income for households below poverty" - description: "Number of households living under the poverty level and receiving social security income in the last 12 months. Social Security taxes pays benefits to those who are currently retired, to people with disabilities and to the surviving spouses and children of workers who have died." - stat_var_metadata { - stat_var: "Count_Household_WithSocialSecurityIncomeInThePast12Months_FamilyHousehold_BelowPovertyLevelInThePast12Months" - denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - name: "All family households" - } - stat_var_metadata { - stat_var: "Count_Household_WithSocialSecurityIncomeInThePast12Months_MarriedCoupleFamilyHousehold_BelowPovertyLevelInThePast12Months" - denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - name: "Married couple households" - } - stat_var_metadata { - stat_var: "Count_Household_WithSocialSecurityIncomeInThePast12Months_SingleMotherFamilyHousehold_BelowPovertyLevelInThePast12Months" - denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - name: "Single mother households" - } - left_tiles { - type: MAP - title: "Number of households in poverty with social security income (${date})" - } - right_tiles { - type: LINE - title: "Number of households in poverty with social security income" + blocks { + title: "Social security income for households below poverty" + description: "Number of households living under the poverty level and receiving social security income in the last 12 months. Social Security taxes pays benefits to those who are currently retired, to people with disabilities and to the surviving spouses and children of workers who have died." + stat_var_metadata { + stat_var: "Count_Household_WithSocialSecurityIncomeInThePast12Months_FamilyHousehold_BelowPovertyLevelInThePast12Months" + denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + name: "All family households" + } + stat_var_metadata { + stat_var: "Count_Household_WithSocialSecurityIncomeInThePast12Months_MarriedCoupleFamilyHousehold_BelowPovertyLevelInThePast12Months" + denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + name: "Married couple households" + } + stat_var_metadata { + stat_var: "Count_Household_WithSocialSecurityIncomeInThePast12Months_SingleMotherFamilyHousehold_BelowPovertyLevelInThePast12Months" + denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + name: "Single mother households" + } + left_tiles { + type: MAP + title: "Number of households in poverty with social security income (${date})" + } + right_tiles { + type: LINE + title: "Number of households in poverty with social security income" + } } -} -blocks { - title: "Supplemental social security income for households below poverty" - description: "Received supplemental social security income (SSI) and/or public cash assistance in the past 12 months. The Supplemental Security Income (SSI) program provides monthly payments to adults and children with a disability or blindness who have income and resources below specific financial limits. SSI payments are also made to people aged 65 and older without disabilities who meet the financial qualifications." - stat_var_metadata { - stat_var: "Count_Household_WithSSIAndOrCashAssistanceInThePast12Months_FamilyHousehold_BelowPovertyLevelInThePast12Months" - denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - name: "All family households" - } - stat_var_metadata { - stat_var: "Count_Household_WithSSIAndOrCashAssistanceInThePast12Months_MarriedCoupleFamilyHousehold_BelowPovertyLevelInThePast12Months" - denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - name: "Married couple households" - } - stat_var_metadata { - stat_var: "Count_Household_WithSSIAndOrCashAssistanceInThePast12Months_SingleMotherFamilyHousehold_BelowPovertyLevelInThePast12Months" - denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" - unit: "%" - scaling: 100 - name: "Single mother households" - } - left_tiles { - type: MAP - title: "Percentage of households in poverty with supplemental social security income (${date})" - } - right_tiles { - type: LINE - title: "Percentage of households in poverty with supplemental social security income" + blocks { + title: "Supplemental social security income for households below poverty" + description: "Received supplemental social security income (SSI) and/or public cash assistance in the past 12 months. The Supplemental Security Income (SSI) program provides monthly payments to adults and children with a disability or blindness who have income and resources below specific financial limits. SSI payments are also made to people aged 65 and older without disabilities who meet the financial qualifications." + stat_var_metadata { + stat_var: "Count_Household_WithSSIAndOrCashAssistanceInThePast12Months_FamilyHousehold_BelowPovertyLevelInThePast12Months" + denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + name: "All family households" + } + stat_var_metadata { + stat_var: "Count_Household_WithSSIAndOrCashAssistanceInThePast12Months_MarriedCoupleFamilyHousehold_BelowPovertyLevelInThePast12Months" + denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + name: "Married couple households" + } + stat_var_metadata { + stat_var: "Count_Household_WithSSIAndOrCashAssistanceInThePast12Months_SingleMotherFamilyHousehold_BelowPovertyLevelInThePast12Months" + denom: "Count_Household_FamilyHousehold_BelowPovertyLevelInThePast12Months" + unit: "%" + scaling: 100 + name: "Single mother households" + } + left_tiles { + type: MAP + title: "Percentage of households in poverty with supplemental social security income (${date})" + } + right_tiles { + type: LINE + title: "Percentage of households in poverty with supplemental social security income" + } } -} -blocks { - title: "Education attainment" - stat_var_metadata { - stat_var: "Count_Household_HouseholderEducationalAttainmentBachelorsDegreeOrHigher_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "Bachelor's Degree or higher" - } - stat_var_metadata { - stat_var: "Count_Household_HouseholderEducationalAttainmentHighSchoolGraduateIncludesEquivalency_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "High school graduate" - } - stat_var_metadata { - stat_var: "Count_Household_HouseholderEducationalAttainmentLessThanHighSchoolGraduate_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "Less than high school" - } - stat_var_metadata { - stat_var: "Count_Household_HouseholderEducationalAttainmentSomeCollegeOrAssociatesDegree_FamilyHousehold_BelowPovertyLevelInThePast12Months" - name: "Some college or associate's degree" - } - left_tiles { - type: LINE - title: "Education attainment for households in poverty" - } - right_tiles { - type: BAR - title: "" + blocks { + title: "Education attainment" + stat_var_metadata { + stat_var: "Count_Household_HouseholderEducationalAttainmentBachelorsDegreeOrHigher_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "Bachelor's Degree or higher" + } + stat_var_metadata { + stat_var: "Count_Household_HouseholderEducationalAttainmentHighSchoolGraduateIncludesEquivalency_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "High school graduate" + } + stat_var_metadata { + stat_var: "Count_Household_HouseholderEducationalAttainmentLessThanHighSchoolGraduate_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "Less than high school" + } + stat_var_metadata { + stat_var: "Count_Household_HouseholderEducationalAttainmentSomeCollegeOrAssociatesDegree_FamilyHousehold_BelowPovertyLevelInThePast12Months" + name: "Some college or associate's degree" + } + left_tiles { + type: LINE + title: "Education attainment for households in poverty" + } + right_tiles { + type: BAR + title: "" + } } } -# TODO(beets): Finish configuring a block with these stat vars. -# blocks { -# Count_Household_0.5OrLessRatioToPovertyLine_FamilyHousehold -# Count_Household_1.25OrLessRatioToPovertyLine_FamilyHousehold -# Count_Household_1.5OrLessRatioToPovertyLine_FamilyHousehold -# Count_Household_1.85OrLessRatioToPovertyLine_FamilyHousehold -# Count_Household_2OrLessRatioToPovertyLine_FamilyHousehold -# Count_Household_3OrLessRatioToPovertyLine_FamilyHousehold -# Count_Household_4OrLessRatioToPovertyLine_FamilyHousehold -# Count_Household_5OrLessRatioToPovertyLine_FamilyHousehold -# } \ No newline at end of file + # TODO(beets): Finish configuring a blocks with these stat vars. + # blocks { + # Count_Household_0.5OrLessRatioToPovertyLine_FamilyHousehold + # Count_Household_1.25OrLessRatioToPovertyLine_FamilyHousehold + # Count_Household_1.5OrLessRatioToPovertyLine_FamilyHousehold + # Count_Household_1.85OrLessRatioToPovertyLine_FamilyHousehold + # Count_Household_2OrLessRatioToPovertyLine_FamilyHousehold + # Count_Household_3OrLessRatioToPovertyLine_FamilyHousehold + # Count_Household_4OrLessRatioToPovertyLine_FamilyHousehold + # Count_Household_5OrLessRatioToPovertyLine_FamilyHousehold + # } \ No newline at end of file diff --git a/server/config/topic_page_pb2.py b/server/config/topic_page_pb2.py index 30134b90f0..e7a1bc78dd 100644 --- a/server/config/topic_page_pb2.py +++ b/server/config/topic_page_pb2.py @@ -14,7 +14,7 @@ -DESCRIPTOR = _descriptor_pool.Default().AddSerializedFile(b'\n\x10topic_page.proto\x12\x0b\x64\x61tacommons\"\xd7\x01\n\x0cPageMetadata\x12\x10\n\x08topic_id\x18\x01 \x01(\t\x12\x12\n\ntopic_name\x18\x02 \x01(\t\x12\x12\n\nplace_dcid\x18\x03 \x03(\t\x12Q\n\x15\x63ontained_place_types\x18\x04 \x03(\x0b\x32\x32.datacommons.PageMetadata.ContainedPlaceTypesEntry\x1a:\n\x18\x43ontainedPlaceTypesEntry\x12\x0b\n\x03key\x18\x01 \x01(\t\x12\r\n\x05value\x18\x02 \x01(\t:\x02\x38\x01\"l\n\x0fStatVarMetadata\x12\x10\n\x08stat_var\x18\x01 \x01(\t\x12\r\n\x05\x64\x65nom\x18\x02 \x01(\t\x12\x0c\n\x04unit\x18\x03 \x01(\t\x12\x0f\n\x07scaling\x18\x04 \x01(\x01\x12\x0b\n\x03log\x18\x05 \x01(\x08\x12\x0c\n\x04name\x18\x06 \x01(\t\"\xdf\x01\n\x0fRankingMetadata\x12\x14\n\x0cshow_highest\x18\x01 \x01(\x08\x12\x13\n\x0bshow_lowest\x18\x02 \x01(\x08\x12\x15\n\rshow_increase\x18\x03 \x01(\x08\x12\x15\n\rshow_decrease\x18\x04 \x01(\x08\x12\x16\n\x0e\x64iff_base_date\x18\x05 \x01(\t\x12\x15\n\rhighest_title\x18\x06 \x01(\t\x12\x14\n\x0clowest_title\x18\x07 \x01(\t\x12\x16\n\x0eincrease_title\x18\x08 \x01(\t\x12\x16\n\x0e\x64\x65\x63rease_title\x18\t \x01(\t\"(\n\x11HighlightMetadata\x12\x13\n\x0b\x64\x65scription\x18\x01 \x01(\t\"\x88\x04\n\x04Tile\x12\r\n\x05title\x18\x01 \x01(\t\x12\x13\n\x0b\x64\x65scription\x18\x02 \x01(\t\x12(\n\x04type\x18\x03 \x01(\x0e\x32\x1a.datacommons.Tile.TileType\x12\x37\n\x11stat_var_override\x18\x04 \x03(\x0b\x32\x1c.datacommons.StatVarMetadata\x12\x36\n\x10ranking_metadata\x18\x05 \x01(\x0b\x32\x1c.datacommons.RankingMetadata\x12:\n\x12highlight_metadata\x18\x06 \x01(\x0b\x32\x1e.datacommons.HighlightMetadata\x12I\n\x15\x63ontained_place_types\x18\x07 \x03(\x0b\x32*.datacommons.Tile.ContainedPlaceTypesEntry\x1a:\n\x18\x43ontainedPlaceTypesEntry\x12\x0b\n\x03key\x18\x01 \x01(\t\x12\r\n\x05value\x18\x02 \x01(\t:\x02\x38\x01\"~\n\x08TileType\x12\r\n\tTYPE_NONE\x10\x00\x12\x08\n\x04LINE\x10\x01\x12\x07\n\x03\x42\x41R\x10\x02\x12\x07\n\x03MAP\x10\x03\x12\x0b\n\x07SCATTER\x10\x04\x12\r\n\tBIVARIATE\x10\x05\x12\x0b\n\x07RANKING\x10\x06\x12\r\n\tHIGHLIGHT\x10\x07\x12\x0f\n\x0b\x44\x45SCRIPTION\x10\x08\"\xb3\x01\n\x05\x42lock\x12\r\n\x05title\x18\x01 \x01(\t\x12\x13\n\x0b\x64\x65scription\x18\x02 \x01(\t\x12%\n\nleft_tiles\x18\x03 \x03(\x0b\x32\x11.datacommons.Tile\x12&\n\x0bright_tiles\x18\x04 \x03(\x0b\x32\x11.datacommons.Tile\x12\x37\n\x11stat_var_metadata\x18\x05 \x03(\x0b\x32\x1c.datacommons.StatVarMetadata\"b\n\x0fTopicPageConfig\x12+\n\x08metadata\x18\x01 \x01(\x0b\x32\x19.datacommons.PageMetadata\x12\"\n\x06\x62locks\x18\x02 \x03(\x0b\x32\x12.datacommons.Blockb\x06proto3') +DESCRIPTOR = _descriptor_pool.Default().AddSerializedFile(b'\n\x10topic_page.proto\x12\x0b\x64\x61tacommons\"\xd7\x01\n\x0cPageMetadata\x12\x10\n\x08topic_id\x18\x01 \x01(\t\x12\x12\n\ntopic_name\x18\x02 \x01(\t\x12\x12\n\nplace_dcid\x18\x03 \x03(\t\x12Q\n\x15\x63ontained_place_types\x18\x04 \x03(\x0b\x32\x32.datacommons.PageMetadata.ContainedPlaceTypesEntry\x1a:\n\x18\x43ontainedPlaceTypesEntry\x12\x0b\n\x03key\x18\x01 \x01(\t\x12\r\n\x05value\x18\x02 \x01(\t:\x02\x38\x01\"l\n\x0fStatVarMetadata\x12\x10\n\x08stat_var\x18\x01 \x01(\t\x12\r\n\x05\x64\x65nom\x18\x02 \x01(\t\x12\x0c\n\x04unit\x18\x03 \x01(\t\x12\x0f\n\x07scaling\x18\x04 \x01(\x01\x12\x0b\n\x03log\x18\x05 \x01(\x08\x12\x0c\n\x04name\x18\x06 \x01(\t\"\xdf\x01\n\x0fRankingMetadata\x12\x14\n\x0cshow_highest\x18\x01 \x01(\x08\x12\x13\n\x0bshow_lowest\x18\x02 \x01(\x08\x12\x15\n\rshow_increase\x18\x03 \x01(\x08\x12\x15\n\rshow_decrease\x18\x04 \x01(\x08\x12\x16\n\x0e\x64iff_base_date\x18\x05 \x01(\t\x12\x15\n\rhighest_title\x18\x06 \x01(\t\x12\x14\n\x0clowest_title\x18\x07 \x01(\t\x12\x16\n\x0eincrease_title\x18\x08 \x01(\t\x12\x16\n\x0e\x64\x65\x63rease_title\x18\t \x01(\t\"(\n\x11HighlightMetadata\x12\x13\n\x0b\x64\x65scription\x18\x01 \x01(\t\"\x88\x04\n\x04Tile\x12\r\n\x05title\x18\x01 \x01(\t\x12\x13\n\x0b\x64\x65scription\x18\x02 \x01(\t\x12(\n\x04type\x18\x03 \x01(\x0e\x32\x1a.datacommons.Tile.TileType\x12\x37\n\x11stat_var_override\x18\x04 \x03(\x0b\x32\x1c.datacommons.StatVarMetadata\x12\x36\n\x10ranking_metadata\x18\x05 \x01(\x0b\x32\x1c.datacommons.RankingMetadata\x12:\n\x12highlight_metadata\x18\x06 \x01(\x0b\x32\x1e.datacommons.HighlightMetadata\x12I\n\x15\x63ontained_place_types\x18\x07 \x03(\x0b\x32*.datacommons.Tile.ContainedPlaceTypesEntry\x1a:\n\x18\x43ontainedPlaceTypesEntry\x12\x0b\n\x03key\x18\x01 \x01(\t\x12\r\n\x05value\x18\x02 \x01(\t:\x02\x38\x01\"~\n\x08TileType\x12\r\n\tTYPE_NONE\x10\x00\x12\x08\n\x04LINE\x10\x01\x12\x07\n\x03\x42\x41R\x10\x02\x12\x07\n\x03MAP\x10\x03\x12\x0b\n\x07SCATTER\x10\x04\x12\r\n\tBIVARIATE\x10\x05\x12\x0b\n\x07RANKING\x10\x06\x12\r\n\tHIGHLIGHT\x10\x07\x12\x0f\n\x0b\x44\x45SCRIPTION\x10\x08\"\xb3\x01\n\x05\x42lock\x12\r\n\x05title\x18\x01 \x01(\t\x12\x13\n\x0b\x64\x65scription\x18\x02 \x01(\t\x12%\n\nleft_tiles\x18\x03 \x03(\x0b\x32\x11.datacommons.Tile\x12&\n\x0bright_tiles\x18\x04 \x03(\x0b\x32\x11.datacommons.Tile\x12\x37\n\x11stat_var_metadata\x18\x05 \x03(\x0b\x32\x1c.datacommons.StatVarMetadata\"R\n\x08\x43\x61tegory\x12\r\n\x05title\x18\x01 \x01(\t\x12\x13\n\x0b\x64\x65scription\x18\x02 \x01(\t\x12\"\n\x06\x62locks\x18\x03 \x03(\x0b\x32\x12.datacommons.Block\"i\n\x0fTopicPageConfig\x12+\n\x08metadata\x18\x01 \x01(\x0b\x32\x19.datacommons.PageMetadata\x12)\n\ncategories\x18\x02 \x03(\x0b\x32\x15.datacommons.Categoryb\x06proto3') @@ -26,6 +26,7 @@ _TILE = DESCRIPTOR.message_types_by_name['Tile'] _TILE_CONTAINEDPLACETYPESENTRY = _TILE.nested_types_by_name['ContainedPlaceTypesEntry'] _BLOCK = DESCRIPTOR.message_types_by_name['Block'] +_CATEGORY = DESCRIPTOR.message_types_by_name['Category'] _TOPICPAGECONFIG = DESCRIPTOR.message_types_by_name['TopicPageConfig'] _TILE_TILETYPE = _TILE.enum_types_by_name['TileType'] PageMetadata = _reflection.GeneratedProtocolMessageType('PageMetadata', (_message.Message,), { @@ -86,6 +87,13 @@ }) _sym_db.RegisterMessage(Block) +Category = _reflection.GeneratedProtocolMessageType('Category', (_message.Message,), { + 'DESCRIPTOR' : _CATEGORY, + '__module__' : 'topic_page_pb2' + # @@protoc_insertion_point(class_scope:datacommons.Category) + }) +_sym_db.RegisterMessage(Category) + TopicPageConfig = _reflection.GeneratedProtocolMessageType('TopicPageConfig', (_message.Message,), { 'DESCRIPTOR' : _TOPICPAGECONFIG, '__module__' : 'topic_page_pb2' @@ -118,6 +126,8 @@ _TILE_TILETYPE._serialized_end=1150 _BLOCK._serialized_start=1153 _BLOCK._serialized_end=1332 - _TOPICPAGECONFIG._serialized_start=1334 - _TOPICPAGECONFIG._serialized_end=1432 + _CATEGORY._serialized_start=1334 + _CATEGORY._serialized_end=1416 + _TOPICPAGECONFIG._serialized_start=1418 + _TOPICPAGECONFIG._serialized_end=1523 # @@protoc_insertion_point(module_scope) diff --git a/server/routes/topic_page.py b/server/routes/topic_page.py index d16d28a084..2949884985 100644 --- a/server/routes/topic_page.py +++ b/server/routes/topic_page.py @@ -28,9 +28,6 @@ @bp.route('/', strict_slashes=False) @bp.route('//', strict_slashes=False) def topic_page(topic_id=None, place_dcid=None): - if os.environ.get('FLASK_ENV') == 'production': - flask.abort(404) - topics_summary = json.dumps(current_app.config['TOPIC_PAGE_SUMMARY']) # Redirect to the landing page. if not place_dcid and not topic_id: diff --git a/server/templates/topic_page.html b/server/templates/topic_page.html index 39101c4267..b52f94a78a 100644 --- a/server/templates/topic_page.html +++ b/server/templates/topic_page.html @@ -18,7 +18,10 @@ {% set main_id = 'dc-topic-page' %} {% set title = topic_name + ' in ' + place_name + ' - ' + _('Topic Explorer') %} {% set subpage_title = _('Topic Explorer') %} -{% set subpage_url = url_for('topic_page.topic_page') %} +{# TODO(beets): revert to this url when we have a decent landing page. + set subpage_url = url_for('topic_page.topic_page') + #} +{% set subpage_url = '#' %} {% set hide_search = True %} {% block head %} @@ -26,17 +29,20 @@ {% endblock %} {% block content %} -
-
-
-

-

-

-
+
+
+ +
+
+
-
-
+
+
+
+
+
+
{% endblock %} {% block footer %} diff --git a/server/templates/topic_page_landing.html b/server/templates/topic_page_landing.html index d49c8ea681..b31460159d 100644 --- a/server/templates/topic_page_landing.html +++ b/server/templates/topic_page_landing.html @@ -27,7 +27,8 @@ {% block content %}

{% trans %}Topic Explorer{% endtrans %}

-

Placeholder landing page

+

Equity

+

in United States of America

{% endblock %} {% block footer %} diff --git a/server/webdriver_tests/tests/place_explorer_i18n_test.py b/server/webdriver_tests/tests/place_explorer_i18n_test.py index 16306013fb..6e1b53e072 100644 --- a/server/webdriver_tests/tests/place_explorer_i18n_test.py +++ b/server/webdriver_tests/tests/place_explorer_i18n_test.py @@ -92,7 +92,7 @@ def test_demographics_link_in_fr(self): # Find and click on the Demographics URL. demographics = self.driver.find_element_by_xpath( '//*[@id="Demographics"]/a') - self.assertEqual(demographics.text, 'Données démographiques') + self.assertEqual(demographics.text, 'DONNÉES DÉMOGRAPHIQUES') demographics.click() # Wait until the new page has loaded. diff --git a/static/css/shared/story_block.scss b/static/css/shared/story_block.scss index 3a6c870555..07830866be 100644 --- a/static/css/shared/story_block.scss +++ b/static/css/shared/story_block.scss @@ -17,6 +17,7 @@ $subtopic-background: rgba(0, 0, 0, 0.05); $subtopic-color: #222; +.block-title, .block h2 { color: $subtopic-color; font-weight: 600; diff --git a/static/css/topic_page.scss b/static/css/topic_page.scss index 6d762bc077..e731945cb6 100644 --- a/static/css/topic_page.scss +++ b/static/css/topic_page.scss @@ -22,6 +22,16 @@ $chart-container-top-margin: 20px; +#dc-topic-page { + margin-left: 1.5rem; + margin-right: 1.5rem; + + @include media-breakpoint-up(md) { + margin-left: 3rem; + margin-right: 3rem; + } +} + #dc-topic-page a { color: inherit; text-decoration: underline; @@ -90,8 +100,10 @@ section.subtopic { .highlight-tile { display: flex; font-family: $headings-font-family; - padding-top: 2rem; - padding-bottom: 2rem; + padding: 1rem; + margin-bottom: 1rem; + background: var(--dc-red-fade); + border-radius: 5px; } .highlight-tile .stat { @@ -100,7 +112,7 @@ section.subtopic { } .highlight-tile .desc { - padding-left: .4em; + padding-left: 1em; font-size: 1.2rem; } @@ -121,7 +133,7 @@ section.subtopic { display: flex; justify-content: space-between; width: 100%; - padding: 2rem 0; + padding: 1rem 0; } .page-selector-section { @@ -143,6 +155,63 @@ section.subtopic { padding: 15px; } +.chart-container.ranking-tile { + padding-top: 15.5px; +} + .chart-container footer { margin-left: inherit !important; +} + +article.category > h2 { + color: var(--dc-gray); + font-weight: 600; + font-size: 1.1rem; + text-transform: uppercase; + line-height: 1.5rem; + margin-top: 10px; +} + +#dc-topic-page .block .row { + margin-left: -15px; + margin-right: -15px; +} + +#dc-topic-page .col-12 { + padding: 1em 0 2em 0; +} + +.subtopic { + border-top: 1px solid var(--dc-gray); + padding: 1em 0; +} + +.subtopic:first-of-type { + border-top: none; +} + +#sidebar { + padding-top: 100px; + padding-right: 30px; +} + +#sidebar .nav-item a { + padding: 0.25rem 0 0.25rem 0.5rem; + font-size: 0.8rem; +} + +#sidebar .nav-item.category a { + font-weight: 600; + padding-top: 1em; +} + +#sidebar .nav-item a { + font-weight: 300; + text-decoration: none; + color: var(--dc-gray); + display: inline-block; + font-size: 0.9rem; + line-height: 1.2rem; + padding: 0.3rem 0; + text-decoration: none; } \ No newline at end of file diff --git a/static/js/topic_page/bar_tile.tsx b/static/js/topic_page/bar_tile.tsx index c4fede13ee..3efe536aba 100644 --- a/static/js/topic_page/bar_tile.tsx +++ b/static/js/topic_page/bar_tile.tsx @@ -153,13 +153,17 @@ function processData( ) { continue; } + const stat = raw.data[statVar].stat[placeDcid]; const dataPoint = { label: getStatVarName(statVar, props.statVarMetadata), - value: raw.data[statVar].stat[placeDcid].value, + value: stat.value, dcid: placeDcid, }; + sources.add(raw.metadata[stat.metaHash].provenanceUrl); if (item.denom && item.denom in raw.data) { - dataPoint.value /= raw.data[item.denom].stat[placeDcid].value; + const denomStat = raw.data[item.denom].stat[placeDcid]; + dataPoint.value /= denomStat.value; + sources.add(raw.metadata[denomStat.metaHash].provenanceUrl); } if (item.scaling) { dataPoint.value *= item.scaling; diff --git a/static/js/topic_page/block.tsx b/static/js/topic_page/block.tsx index cdc6e3dd42..c4c72b17df 100644 --- a/static/js/topic_page/block.tsx +++ b/static/js/topic_page/block.tsx @@ -46,8 +46,8 @@ export interface BlockPropType { export function Block(props: BlockPropType): JSX.Element { return ( -
- {props.title &&

{props.title}

} +
+ {props.title &&

{props.title}

} {props.description &&

{props.description}

}
{props.leftTiles && ( diff --git a/static/js/topic_page/category.tsx b/static/js/topic_page/category.tsx new file mode 100644 index 0000000000..4a5b18d3b1 --- /dev/null +++ b/static/js/topic_page/category.tsx @@ -0,0 +1,68 @@ +/** + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Component for rendering a section (a container for blocks). + */ + +import React from "react"; + +import { ErrorBoundary } from "../shared/error_boundary"; +import { NamedTypedPlace } from "../shared/types"; +import { randDomId } from "../shared/util"; +import { Block, BlockPropType } from "./block"; +import { getRelLink } from "./string_utils"; + +export interface Category { + title: string; + description?: string; + blocks: BlockPropType[]; +} + +export interface CategoryPropType { + config: Category; + /** + * The place to show the page for. + */ + place: NamedTypedPlace; + enclosedPlaceType: string; +} + +export function Category(props: CategoryPropType): JSX.Element { + return ( +
+

{props.config.title}

+ {props.config.description &&

{props.config.description}

} + {props.config.blocks.map((block) => { + const id = randDomId(); + return ( + + + + ); + })} +
+ ); +} diff --git a/static/js/topic_page/main_pane.tsx b/static/js/topic_page/main_pane.tsx index e1d856329c..5abe6668a8 100644 --- a/static/js/topic_page/main_pane.tsx +++ b/static/js/topic_page/main_pane.tsx @@ -19,7 +19,7 @@ import React from "react"; import { ErrorBoundary } from "../shared/error_boundary"; import { NamedTypedPlace } from "../shared/types"; import { randDomId } from "../shared/util"; -import { Block, BlockPropType } from "./block"; +import { Category } from "./category"; import { DEFAULT_PAGE_PLACE_TYPE } from "./constants"; import { PageSelector } from "./page_selector"; import { TopicsSummary } from "./topic_page"; @@ -33,8 +33,7 @@ export interface PageMetadata { export interface PageConfig { metadata: PageMetadata; - overviewBlock: BlockPropType; - blocks: BlockPropType[]; + categories: Category[]; } interface MainPanePropType { @@ -70,19 +69,14 @@ export function MainPane(props: MainPanePropType): JSX.Element { topicsSummary={props.topicsSummary} /> {!_.isEmpty(props.pageConfig) && - props.pageConfig.blocks.map((block) => { + props.pageConfig.categories.map((category) => { const id = randDomId(); return ( - ); diff --git a/static/js/topic_page/page_selector.tsx b/static/js/topic_page/page_selector.tsx index 587c58d484..57c6904eaa 100644 --- a/static/js/topic_page/page_selector.tsx +++ b/static/js/topic_page/page_selector.tsx @@ -48,8 +48,10 @@ export function PageSelector(props: PageSelectorPropType): JSX.Element { return (
-

{topicName} in

-
+

+ {topicName} in {props.selectedPlace.name} +

+ {/*
))} - + */}
); diff --git a/static/js/topic_page/sidebar.tsx b/static/js/topic_page/sidebar.tsx new file mode 100644 index 0000000000..faa3a38ab1 --- /dev/null +++ b/static/js/topic_page/sidebar.tsx @@ -0,0 +1,56 @@ +/** + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import _ from "lodash"; +import React from "react"; + +import { randDomId } from "../shared/util"; +import { Category } from "./category"; +import { getRelLink } from "./string_utils"; + +interface SidebarPropsType { + /** + * Categories from the page config. + */ + categories: Category[]; +} + +export function Sidebar(props: SidebarPropsType): JSX.Element { + return ( + + ); +} + +function renderItem(title: string, isCategory: boolean): JSX.Element { + return ( +
  • + {title} +
  • + ); +} diff --git a/static/js/topic_page/string_utils.ts b/static/js/topic_page/string_utils.ts index 981fc4003f..88aa6ffcb7 100644 --- a/static/js/topic_page/string_utils.ts +++ b/static/js/topic_page/string_utils.ts @@ -52,3 +52,7 @@ export function getStatVarName( } return label; } + +export function getRelLink(title: string) { + return title.replace(/ /g, "-"); +} diff --git a/static/js/topic_page/topic_page.ts b/static/js/topic_page/topic_page.ts index 8b2ac43204..41abe7f3c8 100644 --- a/static/js/topic_page/topic_page.ts +++ b/static/js/topic_page/topic_page.ts @@ -20,6 +20,7 @@ import { loadLocaleData } from "../i18n/i18n"; import { NamedTypedPlace } from "../shared/types"; import { DEFAULT_PAGE_PLACE_TYPE } from "./constants"; import { MainPane } from "./main_pane"; +import { Sidebar } from "./sidebar"; export interface TopicsSummary { topicPlaceMap: Record; @@ -32,9 +33,9 @@ window.onload = () => { function renderPage(): void { // Get topic and render menu. - const topic = document.getElementById("title").dataset.topicId; + const topic = document.getElementById("metadata").dataset.topicId; // TODO(beets): remove these if they remain unused. - const dcid = document.getElementById("title").dataset.placeDcid; + const dcid = document.getElementById("metadata").dataset.placeDcid; const placeName = document.getElementById("place-name").dataset.pn; const placeType = document.getElementById("place-type").dataset.pt || DEFAULT_PAGE_PLACE_TYPE; @@ -59,6 +60,13 @@ function renderPage(): void { types: [placeType], }; + ReactDOM.render( + React.createElement(Sidebar, { + categories: pageConfig.categories, + }), + document.getElementById("sidebar") + ); + ReactDOM.render( React.createElement(MainPane, { place,