[FEATURE_REQUEST] Status Indicator Shapes

[jondricek]

Is your feature request related to a problem? If so, please describe.

I love the status indicators! But as they are all circles, people who are colorblind may not be able to e.g. distinguish between the red and green statuses without hovering over them to see if it is up or not.

I suggest adding the option for different shapes for the status indicator dots.

Describe the solution you'd like

I don't know how to add this as a permanent solution. But i did play with adding the following custom CSS and it is working for me.

I'm sorry I don't have any further suggestions!

AI Note: I used ChatGPT to come up with the personal solution below. I have only witnessed the up and down states. I don't even know if Dashy has "checking" or "unavailable" in the first place.

appConfig:
  statusCheck: true
  customCss: |
    /* State colors (adjust if you prefer different palette) */
    .indicator.status-indicator .dot.dot-green  { color: #28a745; }  /* up */
    .indicator.status-indicator .dot.dot-red    { color: #dc3545; }  /* down */
    .indicator.status-indicator .dot.dot-yellow { color: #ffc107; }  /* checking */
    .indicator.status-indicator .dot.dot-grey   { color: #6c757d; }  /* unavailable */

    /* Up/Healthy: circle */
    .indicator.status-indicator .dot.dot-green {
      border-radius: 50% !important;
      clip-path: none !important;
    }

    /* Down/Unhealthy: triangle */
    .indicator.status-indicator .dot.dot-red {
      clip-path: polygon(50% 0%, 100% 86%, 0% 86%) !important;
    }

    /* Checking/In-progress: diamond */
    .indicator.status-indicator .dot.dot-yellow {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
    }

    /* Unavailable/Error: square */
    .indicator.status-indicator .dot.dot-grey {
      border-radius: 2px !important;
      clip-path: none !important;
    }

Priority

Low (Nice-to-have)

Is this something you would be keen to implement

No