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
Feature/fires within settings btn #3997
Merged
Merged
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
704e25f
WIP settings button outside legend
dfrico f699854
Removed Fragment from component, cleaned code
dfrico b018003
Fixed 'ifl' default breaking the button
dfrico 06234b6
Restored embed behaviour
dfrico cb13953
Removed useless config item
dfrico 39262b6
Made settings button configurable
dfrico 8bd6ee2
Removed index from key at chart tooltip, made all settingsConfig arrays
dfrico 77669e6
merge develop
edbrett File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,40 +4,57 @@ import { format } from 'd3-format'; | |
|
||
import PieChart from 'components/charts/pie-chart'; | ||
import PieChartLegend from 'components/charts/components/pie-chart-legend'; | ||
import Button from 'components/ui/button'; | ||
|
||
import './styles'; | ||
|
||
class WidgetPieChart extends PureComponent { | ||
render() { | ||
const { data, settings, simple } = this.props; | ||
const { data, settings, simple, toggleSettingsMenu } = this.props; | ||
const noIntersectionSelected = | ||
!settings.forestType && !settings.landCategory; | ||
|
||
return ( | ||
<div className="c-pie-chart-legend-widget"> | ||
<PieChartLegend | ||
className="cover-legend" | ||
data={data} | ||
config={{ | ||
format: '.3s', | ||
unit: 'ha', | ||
key: 'value', | ||
...settings | ||
}} | ||
simple={simple} | ||
/> | ||
<PieChart | ||
className="cover-pie-chart" | ||
data={data} | ||
maxSize={140} | ||
tooltip={[ | ||
{ | ||
key: 'percentage', | ||
unit: '%', | ||
labelKey: 'label', | ||
unitFormat: value => format('.1f')(value) | ||
} | ||
]} | ||
simple={simple} | ||
/> | ||
{settings && | ||
settings.showSettingsBtn && | ||
noIntersectionSelected && | ||
toggleSettingsMenu && ( | ||
<Button | ||
theme="theme-button-small theme-button-light" | ||
className="pie-contextual-settings-btn" | ||
onClick={() => toggleSettingsMenu()} | ||
> | ||
+ Select an intersection | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this isnt generic, a widget might not have intersections but want this button to exist. It should be configurable. |
||
</Button> | ||
)} | ||
<div className="pie-and-legend"> | ||
<PieChartLegend | ||
className="cover-legend" | ||
data={data} | ||
config={{ | ||
format: '.3s', | ||
unit: 'ha', | ||
key: 'value', | ||
...settings | ||
}} | ||
simple={simple} | ||
/> | ||
<PieChart | ||
className="cover-pie-chart" | ||
data={data} | ||
maxSize={140} | ||
tooltip={[ | ||
{ | ||
key: 'percentage', | ||
unit: '%', | ||
labelKey: 'label', | ||
unitFormat: value => format('.1f')(value) | ||
} | ||
]} | ||
simple={simple} | ||
/> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
@@ -46,7 +63,8 @@ class WidgetPieChart extends PureComponent { | |
WidgetPieChart.propTypes = { | ||
data: PropTypes.array, | ||
simple: PropTypes.bool, | ||
settings: PropTypes.object.isRequired | ||
settings: PropTypes.object.isRequired, | ||
toggleSettingsMenu: PropTypes.func | ||
}; | ||
|
||
export default WidgetPieChart; |
17 changes: 12 additions & 5 deletions
17
app/javascript/components/widget/components/widget-pie-chart-legend/styles.scss
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,10 +1,17 @@ | ||
.c-pie-chart-legend-widget { | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: space-between; | ||
padding-top: rem(30px); | ||
|
||
.cover-legend { | ||
min-width: 50%; | ||
.pie-and-legend { | ||
edbrett marked this conversation as resolved.
Show resolved
Hide resolved
|
||
display: flex; | ||
flex-direction: row; | ||
justify-content: space-between; | ||
|
||
.cover-legend { | ||
min-width: 50%; | ||
} | ||
} | ||
|
||
.pie-contextual-settings-btn { | ||
margin: 0 10px 20px auto; | ||
} | ||
} |
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no use of i in keys please. React gets very upset about this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This solves an issue where the key is undefined and react complains about it. Not sure what to add then 🙃
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we don't have a key we shouldn't be rendering it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If there is no unique data to identify what it is then what is it doing there? Check the data and the render to tidy it up.