-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FEATURE] [MER-3873] Likert activity for instructors (#5274)
* parse data for likert graph + placeholder for likert activity * add datasets and vegalite specs to render likert * refactor: move queries to context modules + move common logic into new ActivityHelpers * move rendered_activity function component to ActivityHelpers module * implement new likert visualization in scored activities * implement new likert visualization in surveys * remove unused alias * fix test warning * add dataset and preview_rendered when section is :v2 * remove unused aliases * consider analytics version v2 for rendering likert visualization * add and update tests * add dark/light mode support + finish styling * sort questions on Y axis + consider blank response case * private functions to explicit magic-numbers + more styling * fix warning
- Loading branch information
Showing
11 changed files
with
1,296 additions
and
1,469 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,75 @@ | ||
import React from 'react'; | ||
import React, { useEffect, useRef, useState } from 'react'; | ||
import { VegaLite, VisualizationSpec } from 'react-vega'; | ||
|
||
export interface VegaLiteSpec { | ||
spec: VisualizationSpec; | ||
} | ||
|
||
export const VegaLiteRenderer = (props: VegaLiteSpec) => { | ||
const [darkMode, setDarkMode] = useState(document.documentElement.classList.contains('dark')); | ||
|
||
const viewRef = useRef<any>(null); | ||
|
||
// Update the 'isDarkMode' parameter and background color when 'darkMode' changes | ||
useEffect(() => { | ||
if (viewRef.current) { | ||
const view = viewRef.current; | ||
|
||
view.signal('isDarkMode', darkMode); | ||
view.background(darkMode ? '#262626' : 'white'); | ||
view.run(); | ||
} | ||
}, [darkMode]); | ||
|
||
const darkTooltipTheme = { | ||
theme: 'dark', | ||
style: { | ||
'vega-tooltip': { | ||
backgroundColor: 'black', | ||
color: 'white', | ||
}, | ||
}, | ||
}; | ||
const lightTooltipTheme = { | ||
theme: 'light', | ||
style: { | ||
'vega-tooltip': { | ||
backgroundColor: 'white', | ||
color: 'black', | ||
}, | ||
}, | ||
}; | ||
|
||
// Set up a MutationObserver to listen for changes to the 'class' attribute | ||
useEffect(() => { | ||
const observer = new MutationObserver(() => { | ||
const isDark = document.documentElement.classList.contains('dark'); | ||
setDarkMode(isDark); | ||
}); | ||
|
||
observer.observe(document.documentElement, { | ||
attributes: true, | ||
attributeFilter: ['class'], | ||
}); | ||
|
||
return () => { | ||
observer.disconnect(); | ||
}; | ||
}, []); | ||
|
||
return ( | ||
<> | ||
<VegaLite spec={props.spec} actions={false} /> | ||
<VegaLite | ||
spec={props.spec} | ||
actions={false} | ||
tooltip={darkMode ? darkTooltipTheme : lightTooltipTheme} | ||
onNewView={(view) => { | ||
viewRef.current = view; | ||
view.signal('isDarkMode', darkMode); | ||
view.background(darkMode ? '#262626' : 'white'); | ||
view.run(); | ||
}} | ||
/> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.