react-intl#defineMessages TypeScript Examples

messages = defineMessages({
  veryNegative: {
    defaultMessage: 'strong opposition',
    description: '[Reviews] Very negative review score. Fits into {score} of the review line',
  },
  negative: {
    defaultMessage: 'opposition',
    description: '[Reviews] Negative review score. Fits into {score} of the review line',
  },
  noPreference: {
    defaultMessage: 'no preference',
    description: '[Reviews] Neutral review score. Fits into {score} of the review line',
  },
  positive: {
    defaultMessage: 'support',
    description: '[Reviews] Positive review score. Fits into {score} of the review line',
  },
  veryPositive: {
    defaultMessage: 'strong support',
    description: '[Reviews] Very positive review score. Fits into {score} of the review line',
  },
})

messages = defineMessages({
  NonEmptyString: {
    id: 'NonEmptyString',
    defaultMessage: 'Can not be empty.',
  },
  TrimmedString: {
    id: 'TrimmedString',
    defaultMessage: 'Please delete leading and trailing whitespaces.',
  },
  Max64String: {
    id: 'Max64String',
    defaultMessage: 'Too long. Max 64 chars.',
  },
  Max512String: {
    id: 'Max512String',
    defaultMessage: 'Too long. Max 512 chars.',
  },
  Min6String: {
    id: 'Min6String',
    defaultMessage: 'Too short. Min 6 chars.',
  },
  EmailString: {
    id: 'EmailString',
    defaultMessage: 'Email is not valid.',
  },
  PhoneString: {
    id: 'PhoneString',
    defaultMessage: 'Invalid phone number.',
  },
  UniqueEmail: {
    id: 'UniqueEmail',
    defaultMessage: 'Email is already used.',
  },
  VerifiedPassword: {
    id: 'VerifiedPassword',
    defaultMessage: 'Password is wrong.',
  },
})

pluralPlaceTypeMessages = defineMessages({
  Country: {
    id: "plural_country",
    defaultMessage: "Countries",
    description:
      "A label or header for a collection of places of type Country (see https://en.wikipedia.org/wiki/Country). Some examples: 'Countries in Europe', 'Median Age: Other Countries', or 'Ranking by Population for Countries in Europe'. Please maintain capitalization.",
  },
  State: {
    id: "plural_state",
    defaultMessage: "States",
    description:
      "A label or header for a collection of places of type State (generally a subdivision of a Country, see https://en.wikipedia.org/wiki/Constituent_state). Some examples: 'Countries in Europe', 'Median Age: Other Countries', or 'Ranking by Population for Countries in Europe'. Please maintain capitalization.",
  },
  County: {
    id: "plural_county",
    defaultMessage: "Counties",
    description:
      "A label or header for a collection of places of type County (generally subdivisions of a State, see https://en.wikipedia.org/wiki/County). Some examples: 'Counties in California', 'Median Age: Other Counties', or 'Rankings of Population for Counties in California'. Please maintain capitalization.",
  },
  City: {
    id: "plural_city",
    defaultMessage: "Cities",
    description:
      "A label or header for a collection of places of type City (generally places with more people than a town, borough or village, see https://en.wikipedia.org/wiki/City). Some examples: 'Cities in California', 'Median Age: Other Cities', or 'Rankings of Population for Cities in California'. Please maintain capitalization.",
  },
  Town: {
    id: "plural_town",
    defaultMessage: "Towns",
    description:
      "A label or header for a collection of places of type Town (generally places with fewer people than a city, but more than a village, see https://en.wikipedia.org/wiki/Town). Some examples: 'Towns in California', 'Median Age: Other Towns', or 'Rankings of Population for Towns in California'. Please maintain capitalization.",
  },
  Village: {
    id: "plural_village",
    defaultMessage: "Villages",
    description:
      "A label or header for a collection of places of type Village (generally places smaller than a town, see https://en.wikipedia.org/wiki/Village). Some examples: 'Villages in California', 'Median Age: Other Villages', or 'Ranking by Population for Villages in California'. Please maintain capitalization.",
  },
  Borough: {
    id: "plural_borough",
    defaultMessage: "Boroughs",
    description:
      "A label or header for a collection of places of type Borough (generally places similar to a town or city, see https://en.wikipedia.org/wiki/Borough). Some examples: 'Boroughs in California', 'Median Age: Other Boroughs', or 'Ranking by Population for Boroughs in New York'. Please maintain capitalization.",
  },
  Neighborhood: {
    id: "plural_neighborhood",
    defaultMessage: "Neighborhoods",
    description:
      "A label or header for a collection of places of type Neighborhood (generally places within a town or city, see https://en.wikipedia.org/wiki/Neighborhood). Some examples: 'Neighborhoods in California', 'Median Age: Other Neighborhoods', or 'Ranking by Population for Neighborhoods in Paris'. Please maintain capitalization.",
  },
  CensusZipCodeTabulationArea: {
    id: "plural_zip_codes",
    defaultMessage: "Zip Codes",
    description:
      'A collection of ZIP Codes. Some examples: "_ZIP Codes_ in Fremont" or "Median Age: _ZIP Codes_ near 94539", "Median Age: Other _ZIP Codes_" or "Ranking by Number of Employed People for _ZIP Codes_ in Santa Clara County".',
  },
  Place: {
    id: "plural_places",
    defaultMessage: "Places",
    description:
      'General collection of places. It is used when we don"t have a specific place type. Some examples: "_Places_ in Russia" as a header for a section with links to many places contained in Russia, as chart titles, such as "Median Age: _Places_ near Paris" or "Median Age: Other _Places_", or "Ranking for All _Places_ in Russia".',
  },
})

singularPlaceTypeMessages = defineMessages({
  Country: {
    id: "singular_country",
    defaultMessage: "Country",
    description:
      "Label used for an administrative division, akin to definition here https://en.wikipedia.org/wiki/Country. An example use is 'A Country in Europe' to describe 'France'. Please maintain capitalization.",
  },
  State: {
    id: "singular_state",
    defaultMessage: "State",
    description:
      "Label used for an administrative division, akin to definition here https://en.wikipedia.org/wiki/Constituent_state, generally a subdivision of a country. An example use is 'A State in United States' to describe 'California'. Please maintain capitalization.",
  },
  County: {
    id: "singular_county",
    defaultMessage: "County",
    description:
      "Label used for an administrative division, akin to definition here https://en.wikipedia.org/wiki/County, generally a subdivision of a State. An example use is 'County in California' to describe 'San Mateo County'. Please maintain capitalization.",
  },
  City: {
    id: "singular_city",
    defaultMessage: "City",
    description:
      "Label used for an administrative division, akin to definition here https://en.wikipedia.org/wiki/City, generally a place with more people than a town, borough or village. An example use is 'City in France' to describe 'Paris'. Please maintain capitalization.",
  },
  Town: {
    id: "singular_town",
    defaultMessage: "Town",
    description:
      "Label used for an administrative division, akin to definition here https://en.wikipedia.org/wiki/Town, generally a place with fewer people than a city, but more than a village. An example use is 'Town in France' to describe 'Paris'. Please maintain capitalization.",
  },
  Village: {
    id: "singular_village",
    defaultMessage: "Village",
    description:
      "Label used for an administrative division, akin to definition here https://en.wikipedia.org/wiki/Village, generally a place smaller than a town. An example use is 'Village in Harris County' to describe 'Hilshire Village'. Please maintain capitalization.",
  },
  Borough: {
    id: "singular_borough",
    defaultMessage: "Borough",
    description:
      "Label used for an administrative division, akin to definition here https://en.wikipedia.org/wiki/Borough, similar to a town or city. An example use is 'Borough in New York' to describe 'Queens'. Please maintain capitalization.",
  },
  Neighborhood: {
    id: "singular_neighborhood",
    defaultMessage: "Neighborhood",
    description:
      "Label used for an administrative division, akin to definition here https://en.wikipedia.org/wiki/Neighborhood, generally a place within a town or city. An example use is 'Neighborhood in Paris' to describe '8th arrondissement'. Please maintain capitalization.",
  },
  CensusZipCodeTabulationArea: {
    id: "singular_zip_code",
    defaultMessage: "ZIP Code",
    description:
      'A ZIP Code area. Some examples, we say that 94539 is "_ZIP Code_ in Alameda County, California, United States of America, North America".',
  },
  Place: {
    id: "singular_place",
    defaultMessage: "Place",
    description:
      'A general type of place. It is used as a top-level description of places with uncommon place types such as Eurostat NUTS or AdministrativeArea 1-5. For example, we may say "Moscow Oblast is A _Place_ in Russia" or "Lincoln Center is a _Place_ in New York City".',
  },
})

messages = defineMessages({
  captains: {
    defaultMessage: '{gameMode} captains',
    description: '[Team] Team listing title',
  },
  developer: {
    defaultMessage: 'Developers',
    description: '[Team] Team listing title',
  },
  metadata: {
    defaultMessage: 'Metadata reviewers',
    description: '[Team] Team listing title',
  },
  moderator: {
    defaultMessage: 'Moderators',
    description: '[Team] Team listing title',
  },
  news: {
    defaultMessage: 'News editors / Managers',
    description: '[Team] Team listing title',
  },
  video: {
    defaultMessage: 'Video editors',
    description: '[Team] Team listing title',
  },
})

messages = defineMessages({
  any: {
    defaultMessage: 'Any',
    description: '[General] Selector option indicating that any of the choices are valid',
  },
  comparer: {
    defaultMessage: 'Compare across:',
    description: '[Surveys] Selector for statistic to compare results across',
  },
  gameMode: {
    defaultMessage: 'Game mode:',
    description: '[General] Selector to change game mode',
  },
  joinYear: {
    defaultMessage: 'Account age',
    description: '[Surveys] Comparing statistic option',
  },
  mapper: {
    defaultMessage: 'Mapper',
    description: '[Surveys] Responder identity option',
  },
  none: {
    defaultMessage: 'None',
    description: '[General] Selector option indicating that none of the choices are valid',
  },
  player: {
    defaultMessage: 'Player',
    description: '[Surveys] Responder identity option',
  },
  rank: {
    defaultMessage: 'Rank',
    description: '[Surveys] Comparing statistic option',
  },
  userIdentity: {
    defaultMessage: 'Responder identity:',
    description: '[Surveys] Selector for responder identity',
  },
})

messages = defineMessages({
  no: {
    defaultMessage: 'No',
    description: '[General] Boolean',
  },
  yes: {
    defaultMessage: 'Yes',
    description: '[General] Boolean',
  },
})

messages = defineMessages({
  notAllowed: {
    defaultMessage: 'Not allowed',
    description:
      '[Submissions] Aggregate review score shown on submissions table for maps that cannot be Loved',
  },
  selectScore: {
    defaultMessage: 'Select a score',
    description: '[Reviews] Placeholder value for review score selector',
  },

  add: {
    defaultMessage: 'Add',
    description: '[General] Add button',
  },
  adding: {
    defaultMessage: 'Adding...',
    description: '[General] Add button when in progress',
  },
  update: {
    defaultMessage: 'Update',
    description: '[General] Update button',
  },
  updating: {
    defaultMessage: 'Updating...',
    description: '[General] Update button when in progress',
  },
})

messages = defineMessages({
  selectScore: {
    defaultMessage: 'Select a score',
    description: '[Reviews] Placeholder value for review score selector',
  },
  submit: {
    defaultMessage: 'Submit',
    description: '[General] Submit button',
  },
  submitAndStay: {
    defaultMessage: 'Submit and stay on page',
    description:
      "[Submission form] Submit button that doesn't navigate to the submissions page afterward",
  },
  submitting: {
    defaultMessage: 'Submitting...',
    description: '[General] Submit button when in progress',
  },
})

messages = defineMessages({
  noReply: {
    defaultMessage: 'No reply',
    description: '[Mapper consents] Mapper consent shown in mapper consents table',
  },
  unreachable: {
    defaultMessage: 'Unreachable',
    description: '[Mapper consents] Mapper consent shown in mapper consents table',
  },
  beatmapset: {
    defaultMessage: 'Beatmapset',
    description: '[Mapper consents] Mapper beatmapset consents table header',
  },
  consent: {
    defaultMessage: 'Consent',
    description: '[Mapper consents] Mapper beatmapset consents table header',
  },
  notes: {
    defaultMessage: 'Notes',
    description: '[Mapper consents] Mapper beatmapset consents table header',
  },

  no: {
    defaultMessage: 'No',
    description: '[General] Boolean',
  },
  yes: {
    defaultMessage: 'Yes',
    description: '[General] Boolean',
  },
})

messages = defineMessages({
  selectConsent: {
    defaultMessage: 'Select a consent option',
    description: '[Mapper consents] Mapper consent editor option',
  },
  submit: {
    defaultMessage: 'Submit',
    description: '[General] Submit button',
  },
  submitting: {
    defaultMessage: 'Submitting...',
    description: '[General] Submit button when in progress',
  },
})

messages = defineMessages({
  dark: {
    defaultMessage: 'Dark',
    description: '[Header] Option for dark theme',
  },
  light: {
    defaultMessage: 'Light',
    description: '[Header] Option for light theme',
  },
})

messages = defineMessages({
  flag: {
    defaultMessage: '{country} flag',
    description: '[Flag icons] Country flag image alt text',
  },
  unknownCountry: {
    defaultMessage: 'Unknown country',
    description: '[Flag icons] Shown in flag image alt text for the "?" flag',
  },
})

messages = defineMessages({
  any: {
    defaultMessage: 'Any',
    description: '[General] Selector option indicating that any of the choices are valid',
  },
  ascending: {
    defaultMessage: 'Ascending',
    description: '[Poll results] Round order option for poll results table',
  },
  descending: {
    defaultMessage: 'Descending',
    description: '[Poll results] Round order option for poll results table',
  },
  percentAndTotal: {
    defaultMessage: 'Percent and total',
    description: '[Poll results] Result display option for poll results table',
  },
  resultDisplay: {
    defaultMessage: 'Result display:',
    description: '[Poll results] Selector to change result display in poll results table',
  },
  roundOrder: {
    defaultMessage: 'Round order:',
    description: '[Poll results] Selector to change round order in poll results table',
  },
  yesAndNo: {
    defaultMessage: 'Yes and no',
    description: '[Poll results] Result display option for poll results table',
  },
  pollInProgress: {
    defaultMessage: 'Poll in progress',
    description: '[Poll results] Placeholder for results for ongoing polls',
  },

  deletedBeatmapset: {
    defaultMessage: 'Deleted beatmapset',
    description: '[General] Placeholder for beatmapsets that were deleted from osu!',
  },
  gameMode: {
    defaultMessage: 'Game mode:',
    description: '[General] Selector to change game mode',
  },
})

subtitleMessages = defineMessages({
    all: {
      id: "ranking-subtitle_all",
      defaultMessage: "All {pluralPlaceType} in {placeName}",
      description:
        "Subtitle of the page, which shows ranking of all contained places of a type within a place, where {pluralPlaceType} will be replaced by the place type of the contained places (could be cities, countries, counties), and {placeName} is the containing place. Please maintain the {placeName} and {pluralPlaceType} as is in the final translation, and use a gender neutral structure that conveys the same meaning (e.g. dashes to separate).",
    },
    allPerCapita: {
      id: "ranking-subtitle_all_percapita",
      defaultMessage: "All {pluralPlaceType} in {placeName}, per capita",
      description:
        "Subtitle of the page, which shows ranking of all contained places of a type within a place, computed on a per capita basis, where {pluralPlaceType} will be replaced by the place type of the contained places (could be cities, countries, counties), and {placeName} is the containing place. Please maintain the {placeName} and {pluralPlaceType} as is in the final translation, and use a gender neutral structure that conveys the same meaning (e.g. dashes to separate).",
    },
    top: {
      id: "ranking-subtitle_top",
      defaultMessage: "Top {rankSize} {pluralPlaceType} in {placeName}",
      description:
        "Subtitle of the page, which shows ranking of the top / highest {rankSize} contained places of a type within a place, where {rankSize} will be replaced by a number, {pluralPlaceType} will be replaced by the place type of the contained places (could be cities, countries, counties), and {placeName} is the containing place. Please maintain the {rankSize}, {placeName} and {pluralPlaceType} as is in the final translation, and use a gender neutral structure that conveys the same meaning (e.g. dashes to separate).",
    },
    topPerCapita: {
      id: "ranking-subtitle_top_percapita",
      defaultMessage:
        "Top {rankSize} {pluralPlaceType} in {placeName}, per capita",
      description:
        "Subtitle of the page, which shows ranking of the top / highest {rankSize} contained places of a type within a place, computed on a per capita basis, where {rankSize} will be replaced by a number, {pluralPlaceType} will be replaced by the place type of the contained places (could be cities, countries, counties), and {placeName} is the containing place. Please maintain the {rankSize}, {placeName} and {pluralPlaceType} as is in the final translation, and use a gender neutral structure that conveys the same meaning (e.g. dashes to separate).",
    },
    bottom: {
      id: "ranking-subtitle_bottom",
      defaultMessage: "Bottom {rankSize} {pluralPlaceType} in {placeName}",
      description:
        "Subtitle of the page, which shows ranking of the bottom {rankSize} contained places of a type within a place, where {rankSize} will be replaced by a number, {pluralPlaceType} will be replaced by the place type of the contained places (could be cities, countries, counties), and {placeName} is the containing place. Please maintain the {rankSize}, {placeName} and {pluralPlaceType} as is in the final translation, and use a gender neutral structure that conveys the same meaning (e.g. dashes to separate).",
    },
    bottomPerCapita: {
      id: "ranking-subtitle_bottom_percapita",
      defaultMessage:
        "Bottom {rankSize} {pluralPlaceType} in {placeName}, per capita",
      description:
        "Subtitle of the page, which shows ranking of the bottom {rankSize} contained places of a type within a place, computed on a per capita basis, where {rankSize} will be replaced by a number, {pluralPlaceType} will be replaced by the place type of the contained places (could be cities, countries, counties), and {placeName} is the containing place. Please maintain the {rankSize}, {placeName} and {pluralPlaceType} as is in the final translation, and use a gender neutral structure that conveys the same meaning (e.g. dashes to separate).",
    },
    none: {
      id: "ranking-subtitle_none",
      defaultMessage: "{pluralPlaceType} in {placeName}",
      description:
        "Subtitle of the page, which shows ranking of contained places of a type within a place, where {pluralPlaceType} will be replaced by the place type of the contained places (could be cities, countries, counties), and {placeName} is the containing place. Please maintain the {placeName} and {pluralPlaceType} as is in the final translation, and use a gender neutral structure that conveys the same meaning (e.g. dashes to separate).",
    },
    nonePerCapita: {
      id: "ranking-subtitle_none_percapita",
      defaultMessage: "{pluralPlaceType} in {placeName}, per capita",
      description:
        "Subtitle of the page, which shows ranking of contained places of a type within a place, computed on a per capita basis, where {pluralPlaceType} will be replaced by the place type of the contained places (could be cities, countries, counties), and {placeName} is the containing place. Please maintain the {placeName} and {pluralPlaceType} as is in the final translation, and use a gender neutral structure that conveys the same meaning (e.g. dashes to separate).",
    },
  });

messages = defineMessages({
  close: {
    defaultMessage: 'Close',
    description: '[General] Button to close forms, dropdowns, modals, etc.',
  },
  deleteReview: {
    defaultMessage: 'Delete review',
    description: '[Reviews] Button to delete own review',
  },
  deleteReviewConfirm: {
    defaultMessage: 'Are you sure you want to delete your review?',
    description: '[Reviews] Confirmation to delete own review on a beatmapset',
  },
  editReview: {
    defaultMessage: 'Edit review',
    description: '[Reviews] Button to edit own review',
  },
  expand: {
    defaultMessage: 'Expand',
    description: '[General] Button to expand dropdowns',
  },
  failedVoting: {
    defaultMessage: 'Failed voting',
    description:
      '[Submissions] Aggregate review score shown on submissions table for maps that failed community voting',
  },
  inVoting: {
    defaultMessage: 'In voting',
    description:
      '[Submissions] Aggregate review score shown on submissions table for maps currently in community voting',
  },
  passedVoting: {
    defaultMessage: 'Passed voting',
    description:
      '[Submissions] Aggregate review score shown on submissions table for maps that passed community voting',
  },
  nominated: {
    defaultMessage: 'Nominated',
    description:
      '[Submissions] Aggregate review score shown on submissions table for maps nominated by captains for future voting',
  },
  nominatedForRound: {
    defaultMessage: 'This map has been nominated for {roundName}.',
    description: '[Submissions] Help text explaining that a map has been nominated',
  },
  notAllowed: {
    defaultMessage: 'Not allowed',
    description:
      '[Submissions] Aggregate review score shown on submissions table for maps that cannot be Loved',
  },
  notAllowedLowFavorites: {
    defaultMessage: 'The map has too few favorites.',
    description:
      '[Submissions] Help text explaining that a map cannot be Loved due to having too few favorites',
  },
  notAllowedMapperBanned: {
    defaultMessage: 'The mapset host is banned.',
    description:
      '[Submissions] Help text explaining that a map cannot be Loved due to its mapper being banned',
  },
  notAllowedNoConsent: {
    defaultMessage:
      'The mapper has requested for this map to not be involved with the Loved category.',
    description:
      '[Submissions] Help text explaining that a map cannot be Loved due to its mapper not consenting to it',
  },
  notAllowedTooShort: {
    defaultMessage: 'Every map in this set is too short (under 30 seconds).',
    description: '[Submissions] Help text explaining that a map cannot be Loved due to its length',
  },
  review: {
    defaultMessage: 'Review',
    description: '[Reviews] Button to add or update own review',
  },
  reviewHelp: {
    defaultMessage:
      'You can also hold {key} while clicking on the mapset to open the review modal.',
    description:
      '[Reviews] Help text explaining that the review modal can be opened with a keyboard shortcut',
  },
  reviewNotLoggedIn: {
    defaultMessage: 'You must <a>log in</a> to post reviews.',
    description: '[Reviews] Help text explaining that reviewing requires being logged in',
  },
  high: {
    defaultMessage: 'High',
    description: '[Submissions] Aggregate review score shown on submissions table',
  },
  medium: {
    defaultMessage: 'Medium',
    description: '[Submissions] Aggregate review score shown on submissions table',
  },
  low: {
    defaultMessage: 'Low',
    description: '[Submissions] Aggregate review score shown on submissions table',
  },
  rejected: {
    defaultMessage: 'Rejected',
    description: '[Submissions] Aggregate review score shown on submissions table',
  },
  pending: {
    defaultMessage: 'Pending',
    description:
      '[Submissions] Aggregate review score shown on submissions table for maps with no reviews',
  },
  lovedByVoting: {
    defaultMessage: 'Loved by vote',
    description:
      '[Submissions] Beatmap status shown on submissions table for maps that passed community voting',
  },
  ranked: {
    defaultMessage: 'Ranked',
    description: '[Beatmaps] Beatmap status',
  },
  approved: {
    defaultMessage: 'Approved',
    description: '[Beatmaps] Beatmap status',
  },
  qualified: {
    defaultMessage: 'Qualified',
    description: '[Beatmaps] Beatmap status',
  },
  loved: {
    defaultMessage: 'Loved',
    description: '[Beatmaps] Beatmap status',
  },
})

messages = defineMessages({
  any: {
    defaultMessage: 'Any',
    description: '[General] Selector option indicating that any of the choices are valid',
  },
  artist: {
    defaultMessage: 'Artist',
    description: '[Submissions] Submissions table sort option',
  },
  bpm: {
    defaultMessage: 'BPM',
    description: '[Submissions] Submissions table header',
  },
  difficultyCount: {
    defaultMessage: 'Diffs',
    description: '[Submissions] Submissions table header',
  },
  favoriteCount: {
    defaultMessage: 'Favs',
    description: '[Submissions] Submissions table header',
  },
  gameMode: {
    defaultMessage: 'Game mode:',
    description: '[General] Selector to change game mode',
  },
  keyModes: {
    defaultMessage: 'Keys',
    description: '[Submissions] Submissions table header',
  },
  lovedAndRanked: {
    defaultMessage: 'Loved and ranked',
    description: '[Submissions] Beatmap status option',
  },
  notReviewed: {
    defaultMessage: 'Not reviewed',
    description: '[Submissions] Review status option',
  },
  pendingAndGrave: {
    defaultMessage: 'Pending and grave',
    description: '[Submissions] Beatmap status option',
  },
  playCount: {
    defaultMessage: 'Plays',
    description: '[Submissions] Submissions table header',
  },
  priority: {
    defaultMessage: 'Priority',
    description: '[Submissions] Submissions table header',
  },
  rating: {
    defaultMessage: 'Rating',
    description: '[Submissions] Submissions table header',
  },
  reviewed: {
    defaultMessage: 'Reviewed',
    description: '[Submissions] Review status option',
  },
  score: {
    defaultMessage: 'Score',
    description: '[Submissions] Submissions table header',
  },
  scoreHelp: {
    defaultMessage: 'A placeholder method to sort this listing. {definition}',
    description: '[Submissions] Help text for "Score" submissions table header',
  },
  status: {
    defaultMessage: 'Status',
    description: '[Submissions] Submissions table header',
  },
  title: {
    defaultMessage: 'Title',
    description: '[Submissions] Submissions table sort option',
  },
  year: {
    defaultMessage: 'Year',
    description: '[Submissions] Submissions table header',
  },
  commonKeyModes: {
    defaultMessage: 'Common',
    description: '[Submissions] osu!mania key mode option group for common key modes',
  },
  uncommonKeyModes: {
    defaultMessage: 'Uncommon',
    description: '[Submissions] osu!mania key mode option group for uncommon key modes',
  },
})

render(): JSX.Element {
    const chartElements: JSX.Element[] = [];
    // Plot trend data in overview and topic page.
    // Do not directly localize param. Localize when used as display string.

    // Declare const of reused messages here.
    const chartTitleMsgs = defineMessages({
      placeTypeNearPlace: {
        id: "chart_clause-placetype_near_place",
        defaultMessage: "{chartTitle}: {placeType} near {placeName}",
        description:
          'Preposition for somewhere close by. Used for choropleth map chart titles like "Unemployment rate: {counties} near {Travis County}" or "Annual rainfall: {towns} near {Taos}"',
      },
      placesWithinPlace: {
        id: "chart_clause-places_within_place",
        defaultMessage: "{chartTitle}: places within {placeName}",
        description:
          'Clause for places within some other place. Used for choropleth map chart titles like "Unemployment rate: places within {Tamil Nadu}."',
      },
      otherPlaceTypes: {
        id: "chart_clause-other_placeType",
        defaultMessage: "{chartTitle}: other {placeType}",
        description:
          'Used to describe other places. Like "Educational Attainment in other {countries}".',
      },
      placesThatContainPlace: {
        id: "chart_clause-places_that_contain_place",
        defaultMessage: "{chartTitle}: places that contain {placeName}",
        description:
          'Clause for places that contain some place. E.g. for "Educational Attainment for places that contain {Fremont}" (which would be Alameda County, California, USA, North America).',
      },
    });

    if (!_.isEmpty(this.props.data.trend)) {
      const id = randDomId();
      let rankingParam = new URLSearchParams(`h=${this.props.dcid}`);
      this.props.data.denominator && rankingParam.set("pc", "1");
      this.props.data.scaling &&
        rankingParam.set("scaling", String(this.props.data.scaling));
      this.props.data.unit && rankingParam.set("unit", this.props.data.unit);
      rankingParam = localizeSearchParams(rankingParam);
      chartElements.push(
        <Chart
          key={id}
          id={id}
          dcid={this.props.dcid}
          chartType={chartTypeEnum.LINE}
          trend={this.props.data.trend}
          title={intl.formatMessage(
            {
              id: "chart_clause-variable_in_place",
              defaultMessage: "{variable} in {placeName}",
              description:
                'Used for chart titles like "{Unemployment rate} in {USA}" or "{Poverty rate} in {California}".',
            },
            {
              variable: this.displayDataTitle,
              placeName: this.displayPlaceName,
            }
          )}
          unit={this.props.data.unit}
          names={this.props.names}
          scaling={this.props.data.scaling}
          statsVars={this.props.data.statsVars}
          rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${
            this.parentPlaceDcid
          }?${rankingParam.toString()}`}
          category={this.props.category}
          isUsaPlace={this.props.isUsaPlace}
        ></Chart>
      );
    }
    const relatedChart = this.props.data.relatedChart;
    if (!relatedChart) {
      return <>{chartElements}</>;
    }

    // Prepare parameters for related charts.
    let unit = this.props.data.unit;
    let scaling = this.props.data.scaling;
    const isEarth = this.props.dcid === EARTH_NAMED_TYPED_PLACE.dcid;
    if (relatedChart && relatedChart.scale) {
      unit = relatedChart.unit;
      scaling = relatedChart.scaling ? relatedChart.scaling : 1;
    }
    const chartType =
      this.props.data.statsVars.length == 1
        ? chartTypeEnum.STACK_BAR
        : chartTypeEnum.GROUP_BAR;
    const displayPlaceType = displayNameForPlaceType(
      this.props.placeType,
      true /* isPlural */
    ).toLocaleLowerCase();

    const relatedChartTitle =
      relatedChart && relatedChart.title
        ? relatedChart.title
        : this.displayDataTitle;

    const sharedProps = {
      dcid: this.props.dcid,
      unit: unit,
      names: this.props.names,
      scaling: scaling,
      statsVars: this.props.data.statsVars,
      category: this.props.category,
      isUsaPlace: this.props.isUsaPlace,
    };
    const barChartSharedProps = {
      chartType: chartType,
      ...sharedProps,
    };
    const rankingParam = new URLSearchParams(`h=${this.props.dcid}`);
    if (
      this.props.data.denominator ||
      (!!this.props.data.relatedChart && this.props.data.relatedChart.scale)
    ) {
      rankingParam.set("pc", "1");
    }
    scaling && rankingParam.set("scaling", String(scaling));
    unit && rankingParam.set("unit", unit);
    const rankingArg = `?${localizeSearchParams(rankingParam).toString()}`;
    const choroplethTitle =
      this.props.placeType === "County"
        ? intl.formatMessage(chartTitleMsgs.placeTypeNearPlace, {
            chartTitle: relatedChartTitle,
            placeType: displayPlaceType,
            placeName: this.displayPlaceName,
          })
        : intl.formatMessage(chartTitleMsgs.placesWithinPlace, {
            chartTitle: relatedChartTitle,
            placeName: this.displayPlaceName,
          });

    if (this.props.category === "Overview") {
      // Show one related place for overview page, the preference is
      // choropleth -> nearby -> child -> similar -> parent
      let gotChart = false;
      if (
        !!this.props.data.isChoropleth &&
        (isEarth ||
          (this.props.isUsaPlace &&
            USA_PLACE_TYPES_WITH_CHOROPLETH.has(this.props.placeType)))
      ) {
        const id = randDomId();
        chartElements.push(
          <Chart
            key={id}
            id={id}
            chartType={chartTypeEnum.CHOROPLETH}
            title={choroplethTitle}
            geoJsonData={this.props.geoJsonData}
            choroplethData={this.props.choroplethData}
            rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${this.props.dcid}${rankingArg}`}
            {...sharedProps}
          ></Chart>
        );
        gotChart = true;
      }
      if (!gotChart && !_.isEmpty(this.props.data.nearby)) {
        const id = randDomId();
        chartElements.push(
          <Chart
            key={id}
            id={id}
            snapshot={this.props.data.nearby}
            title={intl.formatMessage(chartTitleMsgs.placeTypeNearPlace, {
              chartTitle: relatedChartTitle,
              placeType: displayPlaceType,
              placeName: this.displayPlaceName,
            })}
            rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${this.parentPlaceDcid}${rankingArg}`}
            {...barChartSharedProps}
          ></Chart>
        );
        gotChart = true;
      }
      if (!gotChart && !_.isEmpty(this.props.data.child)) {
        const id = randDomId();
        chartElements.push(
          <Chart
            key={id}
            id={id}
            snapshot={this.props.data.child}
            title={intl.formatMessage(chartTitleMsgs.placesWithinPlace, {
              chartTitle: relatedChartTitle,
              placeName: this.displayPlaceName,
            })}
            rankingTemplateUrl={`/ranking/_sv_/${this.props.childPlaceType}/${this.props.dcid}${rankingArg}`}
            {...barChartSharedProps}
          ></Chart>
        );
        gotChart = true;
      }
      if (!gotChart && !_.isEmpty(this.props.data.similar)) {
        const id = randDomId();
        chartElements.push(
          <Chart
            key={id}
            id={id}
            snapshot={this.props.data.similar}
            title={intl.formatMessage(chartTitleMsgs.otherPlaceTypes, {
              chartTitle: relatedChartTitle,
              placeType: displayPlaceType,
            })}
            rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${this.parentCountry}${rankingArg}`}
            {...barChartSharedProps}
          ></Chart>
        );
        gotChart = true;
      }
      if (!gotChart && !_.isEmpty(this.props.data.parent)) {
        const id = randDomId();
        chartElements.push(
          <Chart
            key={id}
            id={id}
            snapshot={this.props.data.parent}
            title={intl.formatMessage(chartTitleMsgs.placesThatContainPlace, {
              chartTitle: relatedChartTitle,
              placeName: this.displayPlaceName,
            })}
            rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${this.parentCountry}${rankingArg}`}
            {...barChartSharedProps}
          ></Chart>
        );
      }
    } else {
      // Topic page
      if (!_.isEmpty(this.props.data.nearby)) {
        const id = randDomId();
        chartElements.push(
          <Chart
            key={id}
            id={id}
            snapshot={this.props.data.nearby}
            title={intl.formatMessage(chartTitleMsgs.placeTypeNearPlace, {
              chartTitle: relatedChartTitle,
              placeType: displayPlaceType,
              placeName: this.displayPlaceName,
            })}
            rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${this.parentPlaceDcid}${rankingArg}`}
            {...barChartSharedProps}
          ></Chart>
        );
      }
      if (!_.isEmpty(this.props.data.similar)) {
        const id = randDomId();
        chartElements.push(
          <Chart
            key={id}
            id={id}
            snapshot={this.props.data.similar}
            title={intl.formatMessage(chartTitleMsgs.otherPlaceTypes, {
              chartTitle: relatedChartTitle,
              placeType: displayPlaceType,
            })}
            rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${this.parentCountry}${rankingArg}`}
            {...barChartSharedProps}
          ></Chart>
        );
      }
      if (this.props.placeType !== "City") {
        // TODO(shifucun): Get the child place type in mixer.
        if (!_.isEmpty(this.props.data.child)) {
          const id = randDomId();
          chartElements.push(
            <Chart
              key={id}
              id={id}
              snapshot={this.props.data.child}
              title={intl.formatMessage(chartTitleMsgs.placesWithinPlace, {
                chartTitle: relatedChartTitle,
                placeName: this.displayPlaceName,
              })}
              rankingTemplateUrl={`/ranking/_sv_/${this.props.childPlaceType}/${this.props.dcid}${rankingArg}`}
              {...barChartSharedProps}
            ></Chart>
          );
        }
      }
      if (this.props.placeType !== "State") {
        if (!_.isEmpty(this.props.data.parent)) {
          const id = randDomId();
          const snapshotData = this.props.data.parent;
          // Show two level of population for parent place charts.
          if (
            sharedProps.statsVars.length === 1 &&
            sharedProps.statsVars[0] == "Count_Person"
          ) {
            snapshotData.data = snapshotData.data.slice(0, 2);
          }
          chartElements.push(
            <Chart
              key={id}
              id={id}
              snapshot={snapshotData}
              title={intl.formatMessage(chartTitleMsgs.placesThatContainPlace, {
                chartTitle: relatedChartTitle,
                placeName: this.displayPlaceName,
              })}
              rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${this.parentCountry}${rankingArg}`}
              {...barChartSharedProps}
            ></Chart>
          );
        }
      }
      if (
        !!this.props.data.isChoropleth &&
        (this.props.isUsaPlace || isEarth)
      ) {
        const id = randDomId();
        chartElements.push(
          <Chart
            key={id}
            id={id}
            chartType={chartTypeEnum.CHOROPLETH}
            title={choroplethTitle}
            geoJsonData={this.props.geoJsonData}
            choroplethData={this.props.choroplethData}
            rankingTemplateUrl={`/ranking/_sv_/${this.rankingPlaceType}/${this.props.dcid}${rankingArg}`}
            {...sharedProps}
          ></Chart>
        );
      }
    }
    return <>{chartElements}</>;
  }