Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: icon in SV visualization DHIS2-10496 #1440

Merged
merged 14 commits into from
Apr 27, 2023
Merged

Conversation

edoardo
Copy link
Member

@edoardo edoardo commented Mar 2, 2023

Implements DHIS2-10496

Relates to dhis2/data-visualizer-app#2236


Key features

  1. embed SVG icon on left of SV value

Description

An icon can be assigned to a DE/indicator in Maintenance app.
In DV app there is a new option for Single Value visualizations for showing this icon on the side of the value.

Currently the SVG icon is embedded via a image tag in the main SV SVG.


TODO

  • when in dashboard, disable font styles on title/subtitle
  • figure out how to change the icon color to match the value color

Known issues

  • if a subtitle is very long, it gets cut off on the sides
  • is not possible to change the icon color according to the legend applied: the main reason is that the SVG icons have a specific color for the fill of the various SVG elements. It's possible to change the color via CSS, but the icons need to be modified to use currentColor instead of a specific color in their fill, stroke attributes. Solved by replacing the hardcoded color with currentColor after fetching the SVG from the API.

Screenshots

Example in DV:
Screenshot 2023-03-02 at 10 53 19

With contrast color applied:
Screenshot 2023-04-14 at 16 31 29

Example in dashboard:
Screenshot 2023-03-02 at 10 30 10

Screencast of the toggling of the icon in DV:
https://user-images.githubusercontent.com/150978/222401093-f64acb37-70e2-41d4-ae4b-5b9f4550e8d5.mov

Copy link
Contributor

@martinkrulltott martinkrulltott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good so far, but some of the todos needs to be addressed before merging

@janhenrikoverland janhenrikoverland merged commit e6563ca into master Apr 27, 2023
@janhenrikoverland janhenrikoverland deleted the feat/icon-in-sv branch April 27, 2023 13:26
dhis2-bot added a commit that referenced this pull request Apr 27, 2023
# [25.1.0](v25.0.0...v25.1.0) (2023-04-27)

### Features

* icon in SV visualization DHIS2-10496 ([#1440](#1440)) ([e6563ca](e6563ca))
@dhis2-bot
Copy link
Contributor

🎉 This PR is included in version 25.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants