Axis: Add separate show axis option #74117
Conversation
Develer
added
add to changelog
no-backport
Develer
requested review from
tskarhed,
eledobleefe and
jackw
and removed request for
a team
grafana-pr-automation
bot
added
area/panel/timeseries
| @@ -38,6 +38,7 @@ export const defaultGraphConfig: GraphFieldConfig = { | |||
| }, | |||
| axisGridShow: true, | |||
| axisCenteredZero: false, | |||
| axisShow: false, | |||
There was a problem hiding this comment.
Should this be true by default?
There was a problem hiding this comment.
As I see it's disabled in TimeSeries by default. So probably we have to leave it like that for now.
| color: customConfig.axisColorMode === AxisColorMode.Series ? axisColor : undefined, | ||
| }; | ||
| } | ||
| let axisColorOpts = { |
There was a problem hiding this comment.
I wonder if this naming still makes sense as this is actually more than just axis color options 🤔
maybe it would make more sense to rename this as const axisDisplayOptions or something?
| let axisColorOpts = { | |
| const axisDisplayOptions = { |
There was a problem hiding this comment.
At first, I thought that the tweakAxis method somehow changes axisColorOpts and decided not to change it to const, but now I see that it accepts a newly created object + deconstructs axisColorOpts, so we're safe 🙂 I don't know how I missed that 🤦🏻♂️, thanks for pointing it out.
And yes, I totally agree with the new name 👍🏻
…a into 72074-display-axis-option
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
What is this feature?
This PR will add "Show axis" independent FieldConfig option.
Before
before.mov
After
after.mov
Which issue(s) does this PR fix?:
Fixes #72074
Special notes for your reviewer:
Please check that:
Panel debug snapshot dashboard
{ "panels": [ { "datasource": { "type": "grafana", "uid": "grafana" }, "fieldConfig": { "defaults": { "custom": { "drawStyle": "line", "lineInterpolation": "linear", "barAlignment": 0, "lineWidth": 1, "fillOpacity": 0, "gradientMode": "none", "spanNulls": false, "insertNulls": false, "showPoints": "auto", "pointSize": 5, "stacking": { "mode": "none", "group": "A" }, "axisPlacement": "auto", "axisLabel": "", "axisColorMode": "text", "scaleDistribution": { "type": "linear" }, "axisCenteredZero": false, "hideFrom": { "tooltip": false, "viz": false, "legend": false }, "thresholdsStyle": { "mode": "off" } }, "color": { "mode": "palette-classic" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [ { "matcher": { "id": "byType", "options": "enum" }, "properties": [ { "id": "custom.lineInterpolation", "value": "stepAfter" }, { "id": "custom.axisColorMode", "value": "series" } ] } ] }, "gridPos": { "h": 13, "w": 15, "x": 0, "y": 0 }, "id": 2, "maxDataPoints": 10, "options": { "tooltip": { "mode": "single", "sort": "none" }, "legend": { "showLegend": true, "displayMode": "list", "placement": "bottom", "calcs": [] } }, "targets": [ { "refId": "A", "datasource": { "type": "grafana", "uid": "grafana" }, "queryType": "snapshot", "snapshot": [ { "schema": { "refId": "A", "name": "A", "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time", "nullable": true }, "config": {} }, { "name": "Value", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "config": {} }, { "name": "Min", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "config": {} }, { "name": "Max", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "config": {} }, { "name": "Info", "type": "string", "typeInfo": { "frame": "string", "nullable": true }, "config": {} }, { "name": "State", "type": "enum", "typeInfo": { "frame": "enum" }, "config": { "type": { "enum": { "text": [ "Unknown", "Up", "Down" ], "color": [ "orange", "blue", "red" ] } } } } ] }, "data": { "values": [ [ 1670369720752, 1670373320752, 1670376920752, 1670380520752, 1670384120752, 1670387720752, 1670391320752, 1670394920752 ], [ 97.56700088585262, 97.51875596242603, 97.88367836664669, 97.64813860191066, 97.46344237059202, 97.06932713353162, 97.11185691118344, 97.4315327939052 ], [ 96.17381933561288, 96.86449303671965, 95.5851820937877, 96.94658694041154, 96.7433590164638, 96.74913605945137, 95.61938577725707, 96.24186355022567 ], [ 99.69898997339244, 98.68620205532211, 99.5800005905314, 98.2998754185445, 98.02873998081307, 99.01798295660049, 97.95260164072228, 98.24811606848421 ], [ "down", "down", "up", "down", "down", "down", "up", "up" ], [ 2, 2, 1, 2, 2, 2, 1, 1 ] ] } }, { "schema": { "refId": "B", "name": "B", "fields": [ { "name": "Time", "type": "time", "typeInfo": { "frame": "time.Time", "nullable": true }, "config": {} }, { "name": "State2", "type": "enum", "typeInfo": { "frame": "enum" }, "config": { "type": { "enum": { "text": [ "Left", "Right" ] } } } } ] }, "data": { "values": [ [ 1670369720752, 1670373320752, 1670376920752, 1670380520752, 1670384120752, 1670387720752, 1670391320752, 1670394920752 ], [ 0, 1, 1, 0, 0, 1, 0, 1 ] ] } } ] } ], "title": "Reproduced with embedded data", "type": "timeseries" }, { "gridPos": { "h": 7, "w": 9, "x": 15, "y": 0 }, "id": 5, "options": { "content": "<table width=\"100%\">\n <tr>\n <th width=\"2%\">Panel</th>\n <td >timeseries @ 10.2.0-pre (2f4fbf89ca)</td>\n </tr>\n <tr>\n <th>Queries</th>\n <td>A[testdata], B[testdata]</td>\n </tr>\n \n <tr><th>Data</th><td> 2 frames, 8 fields, 16 rows </td></tr>\n \n <tr>\n <th>Grafana</th>\n <td>10.2.0-pre (2f4fbf89ca) // Open Source</td>\n </tr>\n </table>", "mode": "html" }, "title": "Debug info", "type": "text" }, { "id": 6, "title": "Original Panel JSON", "type": "text", "gridPos": { "h": 13, "w": 9, "x": 15, "y": 7 }, "options": { "content": "{\n \"datasource\": {\n \"type\": \"testdata\",\n \"uid\": \"PD8C576611E62080A\"\n },\n \"fieldConfig\": {\n \"defaults\": {\n \"custom\": {\n \"drawStyle\": \"line\",\n \"lineInterpolation\": \"linear\",\n \"barAlignment\": 0,\n \"lineWidth\": 1,\n \"fillOpacity\": 0,\n \"gradientMode\": \"none\",\n \"spanNulls\": false,\n \"insertNulls\": false,\n \"showPoints\": \"auto\",\n \"pointSize\": 5,\n \"stacking\": {\n \"mode\": \"none\",\n \"group\": \"A\"\n },\n \"axisPlacement\": \"auto\",\n \"axisLabel\": \"\",\n \"axisColorMode\": \"text\",\n \"scaleDistribution\": {\n \"type\": \"linear\"\n },\n \"axisCenteredZero\": false,\n \"hideFrom\": {\n \"tooltip\": false,\n \"viz\": false,\n \"legend\": false\n },\n \"thresholdsStyle\": {\n \"mode\": \"off\"\n }\n },\n \"color\": {\n \"mode\": \"palette-classic\"\n },\n \"mappings\": [],\n \"thresholds\": {\n \"mode\": \"absolute\",\n \"steps\": [\n {\n \"color\": \"green\",\n \"value\": null\n },\n {\n \"color\": \"red\",\n \"value\": 80\n }\n ]\n }\n },\n \"overrides\": [\n {\n \"matcher\": {\n \"id\": \"byType\",\n \"options\": \"enum\"\n },\n \"properties\": [\n {\n \"id\": \"custom.lineInterpolation\",\n \"value\": \"stepAfter\"\n },\n {\n \"id\": \"custom.axisColorMode\",\n \"value\": \"series\"\n }\n ]\n }\n ]\n },\n \"gridPos\": {\n \"h\": 15,\n \"w\": 12,\n \"x\": 0,\n \"y\": 8\n },\n \"id\": 3,\n \"maxDataPoints\": 10,\n \"options\": {\n \"tooltip\": {\n \"mode\": \"single\",\n \"sort\": \"none\"\n },\n \"legend\": {\n \"showLegend\": true,\n \"displayMode\": \"list\",\n \"placement\": \"bottom\",\n \"calcs\": []\n }\n },\n \"targets\": [\n {\n \"datasource\": {\n \"type\": \"testdata\",\n \"uid\": \"PD8C576611E62080A\"\n },\n \"rawFrameContent\": \"[\\n {\\n \\\"schema\\\": {\\n \\\"refId\\\": \\\"A\\\",\\n \\\"name\\\": \\\"A\\\",\\n \\\"fields\\\": [\\n {\\n \\\"name\\\": \\\"Time\\\",\\n \\\"type\\\": \\\"time\\\",\\n \\\"typeInfo\\\": {\\n \\\"frame\\\": \\\"time.Time\\\",\\n \\\"nullable\\\": true\\n },\\n \\\"config\\\": {}\\n },\\n {\\n \\\"name\\\": \\\"Value\\\",\\n \\\"type\\\": \\\"number\\\",\\n \\\"typeInfo\\\": {\\n \\\"frame\\\": \\\"float64\\\",\\n \\\"nullable\\\": true\\n },\\n \\\"config\\\": {}\\n },\\n {\\n \\\"name\\\": \\\"Min\\\",\\n \\\"type\\\": \\\"number\\\",\\n \\\"typeInfo\\\": {\\n \\\"frame\\\": \\\"float64\\\",\\n \\\"nullable\\\": true\\n },\\n \\\"config\\\": {}\\n },\\n {\\n \\\"name\\\": \\\"Max\\\",\\n \\\"type\\\": \\\"number\\\",\\n \\\"typeInfo\\\": {\\n \\\"frame\\\": \\\"float64\\\",\\n \\\"nullable\\\": true\\n },\\n \\\"config\\\": {}\\n },\\n {\\n \\\"name\\\": \\\"Info\\\",\\n \\\"type\\\": \\\"string\\\",\\n \\\"typeInfo\\\": {\\n \\\"frame\\\": \\\"string\\\",\\n \\\"nullable\\\": true\\n },\\n \\\"config\\\": {}\\n },\\n {\\n \\\"name\\\": \\\"State\\\",\\n \\\"type\\\": \\\"enum\\\",\\n \\\"typeInfo\\\": {\\n \\\"frame\\\": \\\"enum\\\"\\n },\\n \\\"config\\\": {\\n \\\"type\\\": {\\n \\\"enum\\\": {\\n \\\"text\\\": [\\n \\\"Unknown\\\",\\n \\\"Up\\\",\\n \\\"Down\\\"\\n ],\\n \\\"color\\\": [\\n \\\"orange\\\",\\n \\\"blue\\\",\\n \\\"red\\\"\\n ]\\n }\\n }\\n }\\n }\\n ]\\n },\\n \\\"data\\\": {\\n \\\"values\\\": [\\n [\\n 1670369720752,\\n 1670373320752,\\n 1670376920752,\\n 1670380520752,\\n 1670384120752,\\n 1670387720752,\\n 1670391320752,\\n 1670394920752\\n ],\\n [\\n 97.56700088585262,\\n 97.51875596242603,\\n 97.88367836664669,\\n 97.64813860191066,\\n 97.46344237059202,\\n 97.06932713353162,\\n 97.11185691118344,\\n 97.4315327939052\\n ],\\n [\\n 96.17381933561288,\\n 96.86449303671965,\\n 95.5851820937877,\\n 96.94658694041154,\\n 96.7433590164638,\\n 96.74913605945137,\\n 95.61938577725707,\\n 96.24186355022567\\n ],\\n [\\n 99.69898997339244,\\n 98.68620205532211,\\n 99.5800005905314,\\n 98.2998754185445,\\n 98.02873998081307,\\n 99.01798295660049,\\n 97.95260164072228,\\n 98.24811606848421\\n ],\\n [\\n \\\"down\\\",\\n \\\"down\\\",\\n \\\"up\\\",\\n \\\"down\\\",\\n \\\"down\\\",\\n \\\"down\\\",\\n \\\"up\\\",\\n \\\"up\\\"\\n ],\\n [\\n 2,\\n 2,\\n 1,\\n 2,\\n 2,\\n 2,\\n 1,\\n 1\\n ]\\n ]\\n }\\n }\\n]\",\n \"refId\": \"A\",\n \"scenarioId\": \"raw_frame\"\n },\n {\n \"datasource\": {\n \"type\": \"testdata\",\n \"uid\": \"PD8C576611E62080A\"\n },\n \"rawFrameContent\": \"[\\n {\\n \\\"schema\\\": {\\n \\\"refId\\\": \\\"B\\\",\\n \\\"name\\\": \\\"B\\\",\\n \\\"fields\\\": [\\n {\\n \\\"name\\\": \\\"Time\\\",\\n \\\"type\\\": \\\"time\\\",\\n \\\"typeInfo\\\": {\\n \\\"frame\\\": \\\"time.Time\\\",\\n \\\"nullable\\\": true\\n },\\n \\\"config\\\": {}\\n },\\n {\\n \\\"name\\\": \\\"State2\\\",\\n \\\"type\\\": \\\"enum\\\",\\n \\\"typeInfo\\\": {\\n \\\"frame\\\": \\\"enum\\\"\\n },\\n \\\"config\\\": {\\n \\\"type\\\": {\\n \\\"enum\\\": {\\n \\\"text\\\": [\\n \\\"Left\\\",\\n \\\"Right\\\"\\n ]\\n }\\n }\\n }\\n }\\n ]\\n },\\n \\\"data\\\": {\\n \\\"values\\\": [\\n [\\n 1670369720752,\\n 1670373320752,\\n 1670376920752,\\n 1670380520752,\\n 1670384120752,\\n 1670387720752,\\n 1670391320752,\\n 1670394920752\\n ],\\n [\\n 0,\\n 1,\\n 1,\\n 0,\\n 0,\\n 1,\\n 0,\\n 1\\n ]\\n ]\\n }\\n }\\n]\",\n \"refId\": \"B\",\n \"scenarioId\": \"raw_frame\"\n }\n ],\n \"title\": \"Time series Enum Field Example\",\n \"type\": \"timeseries\"\n}", "mode": "code", "code": { "language": "json", "showLineNumbers": true, "showMiniMap": true } } }, { "id": 3, "title": "Data from panel above", "type": "table", "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "gridPos": { "h": 7, "w": 15, "x": 0, "y": 13 }, "options": { "showTypeIcons": true }, "targets": [ { "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "panelId": 2, "withTransforms": true, "refId": "A" } ] } ], "schemaVersion": 37, "title": "Debug: Time series Enum Field Example // 2023-08-30 13:38:03", "tags": [ "debug", "debug-timeseries" ], "time": { "from": "2022-12-06T23:35:20.752Z", "to": "2022-12-07T07:23:33.870Z" } }