From 43f063dbcd8875325465a981c734d99f56ea244f Mon Sep 17 00:00:00 2001 From: "david.jones" Date: Mon, 27 Mar 2023 14:01:08 +0100 Subject: [PATCH 1/4] get semantic color tag keys --- content/en/dashboards/guide/widget_colors.md | 10 +++++++--- layouts/shortcodes/semantic-color.md | 2 ++ local/bin/py/build/actions/pull_and_push_file.py | 9 +++------ .../py/build/configurations/pull_config_preview.yaml | 10 ++++++++++ 4 files changed, 22 insertions(+), 9 deletions(-) create mode 100644 layouts/shortcodes/semantic-color.md diff --git a/content/en/dashboards/guide/widget_colors.md b/content/en/dashboards/guide/widget_colors.md index d7add53e7c3fe..c54814bb45f9d 100644 --- a/content/en/dashboards/guide/widget_colors.md +++ b/content/en/dashboards/guide/widget_colors.md @@ -3,7 +3,7 @@ title: Selecting the right colors for your graphs kind: guide --- -In Datadog graphs, color is the primary method by which you can distinguish between series of data. Selecting the right color for your graph ensures that your teammates can parse data in your graphs, draw insights, and troubleshoot effectively. +In Datadog graphs, color is the primary method by which you can distinguish between series of data. Selecting the right color for your graph ensures that your teammates can parse data in your graphs, draw insights, and troubleshoot effectively. {{< img src="dashboards/guide/colors/colors_top.png" alt="Under the heading 'Graph your data', the user is selecting from a list of color palettes." style="width:90%;" >}} @@ -17,7 +17,7 @@ Categorical palettes are best used for data that needs to be differentiated, but #### Classic -The default Classic palette uses a set of six distinct colors optimized for readability. Colors assigned to series repeat if the number of series exceeds six. Adjacent series have distinct colors. +The default Classic palette uses a set of six distinct colors optimized for readability. Colors assigned to series repeat if the number of series exceeds six. Adjacent series have distinct colors. The Classic color palette has visual accessibility support. @@ -38,7 +38,7 @@ For a small subset of compatible tags, Datadog automatically recognizes the mean ### Diverging palettes -Use a Diverging palette when you need to emphasize the difference in values within a data set. Diverging palettes are best suited to data that has a natural order and a natural midpoint. For example: the amount of change in memory utilization, from -100% to +100%, with a natural midpoint at 0%. +Use a Diverging palette when you need to emphasize the difference in values within a data set. Diverging palettes are best suited to data that has a natural order and a natural midpoint. For example: the amount of change in memory utilization, from -100% to +100%, with a natural midpoint at 0%. There are two Diverging palette options: cool (green and blue) or warm (interpolates between yellow and orange). @@ -72,4 +72,8 @@ Datadog offers accessible color modes for graphs to cater to visual needs, inclu {{< img src="dashboards/guide/colors/visual_accessibility.png" alt="Available visual accessibility options: Default, protanopia (difficulty distinguishing greens and reds), deuteranopia (difficulty distinguishing between reds, greens, and yellows), tritanopia (difficulty distinguishing blues and greens), high contrast (increased separation between colors for lower visual acuity), low saturation (decreased contrast for visual contrast sensitivity)." style="width:90%;" >}} +## Supported Tag keys + +{{% semantic-color %}} + [1]: https://app.datadoghq.com/personal-settings/preferences diff --git a/layouts/shortcodes/semantic-color.md b/layouts/shortcodes/semantic-color.md new file mode 100644 index 0000000000000..ce5eecf967b37 --- /dev/null +++ b/layouts/shortcodes/semantic-color.md @@ -0,0 +1,2 @@ +| Tag key | Description | +| :---------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/local/bin/py/build/actions/pull_and_push_file.py b/local/bin/py/build/actions/pull_and_push_file.py index 9c0bde89fdbff..5e5db96b1fd6d 100644 --- a/local/bin/py/build/actions/pull_and_push_file.py +++ b/local/bin/py/build/actions/pull_and_push_file.py @@ -23,6 +23,7 @@ def pull_and_push_file(content, content_dir): :param content: object with a file_name, a file_path, and options to apply :param content_dir: The directory where content should be put """ + base_path = pathlib.Path(content["options"].get("base_path", content_dir)) with open("".join(content["globs"]), mode="r+") as f: file_content = f.read() boundary = re.compile(r'^-{3,}$', re.MULTILINE) @@ -49,14 +50,10 @@ def pull_and_push_file(content, content_dir): if output_content: destination_path = content["options"]["dest_path"].lstrip('/') - dest_path_dir = pathlib.Path(content_dir) / pathlib.Path(destination_path) + dest_path_dir = base_path / pathlib.Path(destination_path) dest_path_dir.mkdir(parents=True, exist_ok=True) with open( - "{}{}{}".format( - content_dir, - destination_path, - basename(content["options"]["file_name"]), - ), + dest_path_dir / pathlib.Path(basename(content["options"]["file_name"])), mode="w+", encoding="utf-8", ) as f: diff --git a/local/bin/py/build/configurations/pull_config_preview.yaml b/local/bin/py/build/configurations/pull_config_preview.yaml index e75a8898bc627..201924c9d4c0f 100644 --- a/local/bin/py/build/configurations/pull_config_preview.yaml +++ b/local/bin/py/build/configurations/pull_config_preview.yaml @@ -1062,3 +1062,13 @@ bundle_excludes: - "com.datadoghq.test" - "com.datadoghq.sample" + - repo_name: web-ui + contents: + - action: pull-and-push-file + branch: cameron.yick/color-documentation-for-docs-team + globs: + - "javascript/datadog/dataviz/lib/shared/get-consistent-color/_get-semantic-color/semantic-color-documentation.md" + options: + base_path: "" + dest_path: "/layouts/shortcodes/" + file_name: "semantic-color.md" From 0c15da6c3a70cbf8f372b014aab22c9bf7934a20 Mon Sep 17 00:00:00 2001 From: "david.jones" Date: Tue, 28 Mar 2023 10:50:44 +0100 Subject: [PATCH 2/4] put on its own page --- content/en/dashboards/guide/semantic_colors.md | 8 ++++++++ content/en/dashboards/guide/widget_colors.md | 4 ---- 2 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 content/en/dashboards/guide/semantic_colors.md diff --git a/content/en/dashboards/guide/semantic_colors.md b/content/en/dashboards/guide/semantic_colors.md new file mode 100644 index 0000000000000..36149d0008126 --- /dev/null +++ b/content/en/dashboards/guide/semantic_colors.md @@ -0,0 +1,8 @@ +--- +title: Semantic color guide +kind: guide +--- + +## Supported tag keys + +{{% semantic-color %}} diff --git a/content/en/dashboards/guide/widget_colors.md b/content/en/dashboards/guide/widget_colors.md index c54814bb45f9d..e9c68b3eb3297 100644 --- a/content/en/dashboards/guide/widget_colors.md +++ b/content/en/dashboards/guide/widget_colors.md @@ -72,8 +72,4 @@ Datadog offers accessible color modes for graphs to cater to visual needs, inclu {{< img src="dashboards/guide/colors/visual_accessibility.png" alt="Available visual accessibility options: Default, protanopia (difficulty distinguishing greens and reds), deuteranopia (difficulty distinguishing between reds, greens, and yellows), tritanopia (difficulty distinguishing blues and greens), high contrast (increased separation between colors for lower visual acuity), low saturation (decreased contrast for visual contrast sensitivity)." style="width:90%;" >}} -## Supported Tag keys - -{{% semantic-color %}} - [1]: https://app.datadoghq.com/personal-settings/preferences From 6b42bf4d53ee23f0fd87a0709402dbcc13a12ab9 Mon Sep 17 00:00:00 2001 From: "david.jones" Date: Mon, 17 Apr 2023 13:38:17 +0100 Subject: [PATCH 3/4] update paths --- local/bin/py/build/configurations/pull_config.yaml | 11 +++++++++++ .../py/build/configurations/pull_config_preview.yaml | 5 +++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/local/bin/py/build/configurations/pull_config.yaml b/local/bin/py/build/configurations/pull_config.yaml index 3dff3327fdb6e..e947b9522ae99 100644 --- a/local/bin/py/build/configurations/pull_config.yaml +++ b/local/bin/py/build/configurations/pull_config.yaml @@ -1059,3 +1059,14 @@ bundle_excludes: - "com.datadoghq.test" - "com.datadoghq.sample" + + - repo_name: web-ui + contents: + - action: pull-and-push-file + branch: prod + globs: + - "generated/md/external/semantic-color-documentation.md" + options: + base_path: "" + dest_path: "/layouts/shortcodes/" + file_name: "semantic-color.md" diff --git a/local/bin/py/build/configurations/pull_config_preview.yaml b/local/bin/py/build/configurations/pull_config_preview.yaml index 201924c9d4c0f..9f3d93344a07e 100644 --- a/local/bin/py/build/configurations/pull_config_preview.yaml +++ b/local/bin/py/build/configurations/pull_config_preview.yaml @@ -1062,12 +1062,13 @@ bundle_excludes: - "com.datadoghq.test" - "com.datadoghq.sample" + - repo_name: web-ui contents: - action: pull-and-push-file - branch: cameron.yick/color-documentation-for-docs-team + branch: prod globs: - - "javascript/datadog/dataviz/lib/shared/get-consistent-color/_get-semantic-color/semantic-color-documentation.md" + - "generated/md/external/semantic-color-documentation.md" options: base_path: "" dest_path: "/layouts/shortcodes/" From 933b2b411673e87d115a1e0628cde5ee7d3ac997 Mon Sep 17 00:00:00 2001 From: David Jones Date: Tue, 18 Apr 2023 13:06:06 +0100 Subject: [PATCH 4/4] Update content/en/dashboards/guide/semantic_colors.md Co-authored-by: Esther Kim --- content/en/dashboards/guide/semantic_colors.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/en/dashboards/guide/semantic_colors.md b/content/en/dashboards/guide/semantic_colors.md index 36149d0008126..b19c3110353ed 100644 --- a/content/en/dashboards/guide/semantic_colors.md +++ b/content/en/dashboards/guide/semantic_colors.md @@ -1,6 +1,7 @@ --- title: Semantic color guide kind: guide +private: true --- ## Supported tag keys