IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DashboardScene: Panel edit visualization suggestions (#82296)

Browse Source 
* DashboardScene: Panel edit visualization suggestions

* Tweak

* tweak

* Update betterer

* Update
This commit is contained in:
Torkel Ödegaard
2024-02-13 11:37:49 +01:00
committed by GitHub
parent 8a90c0f868
commit f7a425d352
6 changed files with 176 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
public/app/features/panel/components/VizTypePicker/VisualizationSuggestions.tsx
View File

@@ -24,39 +24,43 @@ export function VisualizationSuggestions({ searchQuery, onChange, data, panel }:
const filteredSuggestions = filterSuggestionsBySearch(searchQuery, suggestions);
return (
<AutoSizer disableHeight style={{ width: '100%', height: '100%' }}>
{({ width }) => {
if (!width) {
return null;
}
// This div is needed in some places to make AutoSizer work
<div>
<AutoSizer disableHeight style={{ width: '100%', height: '100%' }}>
{({ width }) => {
if (!width) {
return null;
}
const columnCount = Math.floor(width / 170);
const spaceBetween = 8 * (columnCount! - 1);
const previewWidth = (width - spaceBetween) / columnCount!;
width = width - 1;
const columnCount = Math.floor(width / 200);
const spaceBetween = 8 * (columnCount! - 1);
const previewWidth = Math.floor((width - spaceBetween) / columnCount!);
return (
<div>
<div className={styles.filterRow}>
<div className={styles.infoText}>Based on current data</div>
return (
<div>
<div className={styles.filterRow}>
<div className={styles.infoText}>Based on current data</div>
</div>
<div className={styles.grid} style={{ gridTemplateColumns: `repeat(auto-fill, ${previewWidth}px)` }}>
{filteredSuggestions.map((suggestion, index) => (
<VisualizationSuggestionCard
key={index}
data={data!}
suggestion={suggestion}
onChange={onChange}
width={previewWidth - 1}
/>
))}
{searchQuery && filteredSuggestions.length === 0 && (
<div className={styles.infoText}>No results matched your query</div>
)}
</div>
</div>
<div className={styles.grid} style={{ gridTemplateColumns: `repeat(auto-fill, ${previewWidth - 1}px)` }}>
{filteredSuggestions.map((suggestion, index) => (
<VisualizationSuggestionCard
key={index}
data={data!}
suggestion={suggestion}
onChange={onChange}
width={previewWidth}
/>
))}
{searchQuery && filteredSuggestions.length === 0 && (
<div className={styles.infoText}>No results matched your query</div>
)}
</div>
</div>
);
}}
</AutoSizer>
);
}}
</AutoSizer>
</div>
);
}