[checkmk-commits] Combined graph: useful color palette for lines representation

Module: check_mk Branch: master Commit: a3c0135a77630a34e58ff976165ce79d8016a458 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=a3c0135a77630a… Author: Mathias Kettner &lt;mk(a)mathias-kettner.de&gt; Date: Thu Feb 23 14:52:34 2017 +0100 Combined graph: useful color palette for lines representation Change-Id: Iabb4e093fcb3d961eb23179683be0ec4b10f1d21 --- ZUTUN.graphing | 32 ++++++++++++++++++-------------- web/htdocs/metrics.py | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 14 deletions(-) diff --git a/ZUTUN.graphing b/ZUTUN.graphing index edf4973..98851ef 100644 --- a/ZUTUN.graphing +++ b/ZUTUN.graphing @@ -5,14 +5,14 @@ zu machen. -[2] Farbabstufungen für "lines": - Hier einfach auf die Originalfarben ganz verzichten und - Palettenfarben verwenden. Dazu den Code angucken, wo wir - die Palatte definieren ("21/a", "22/a", ....). Daraus einen - Kreis bauen. Dann die Anzahl der Punkte im Kreis durch die - Anzahl der Kurven teilen und die Abstände dadurch so groß - wie möglich machen. Wenn wir mehr Kurven als Farben haben, - müssen wir mehrfach im Kreis "rumfahren". +[2] mk: Farbabstufungen für "lines": + mk: Hier einfach auf die Originalfarben ganz verzichten und + mk: Palettenfarben verwenden. Dazu den Code angucken, wo wir + mk: die Palatte definieren ("21/a", "22/a", ....). Daraus einen + mk: Kreis bauen. Dann die Anzahl der Punkte im Kreis durch die + mk: Anzahl der Kurven teilen und die Abstände dadurch so groß + mk: wie möglich machen. Wenn wir mehr Kurven als Farben haben, + mk: müssen wir mehrfach im Kreis "rumfahren". [3] au: Implementierung von "Average": einfach die kleine Funktion @@ -23,12 +23,12 @@ [4] Titel der Graphen selbst -[5] au:Titel der einzelnen Metriken. Hierbei berücksichtigen, - au:ob alle Kurven vom gleichen Host oder Service kommen. - au:Frage klären, ob eventuell sogar der Name der Metrik - au:auch weggealssen wird - z.B. wenn der Graph nur eine - au:einzige Metrik zeigt und diese schon im Graph-Titel - au:zu sehen ist. +[5] au: Titel der einzelnen Metriken. Hierbei berücksichtigen, + au: ob alle Kurven vom gleichen Host oder Service kommen. + au: Frage klären, ob eventuell sogar der Name der Metrik + au: auch weggealssen wird - z.B. wenn der Graph nur eine + au: einzige Metrik zeigt und diese schon im Graph-Titel + au: zu sehen ist. [6] Graph zu Dashboard hinzufügen. @@ -71,3 +71,7 @@ [18] Default festlegen, wenn man auf die Seite kommt. Sollen wir einfach "Summe" nehmen? + + +[19] Umswitchen der Darstellungsarten über die Knöpfe soll den gewählten Zeitbereich beibehalten. + Geht das überhaupt? diff --git a/web/htdocs/metrics.py b/web/htdocs/metrics.py index 7986b53..37b04dd 100644 --- a/web/htdocs/metrics.py +++ b/web/htdocs/metrics.py @@ -220,6 +220,48 @@ def get_palette_color_by_index(i, shading='a'): return "%s/%s" % (color_key, shading) +# Return a list of colors that are as different as possible (visually) +# by distributing them on the HSV color wheel. +def get_n_different_colors(n): + total_weight = sum([x[1] for x in hsv_color_distribution]) + + colors = [] + while len(colors) < n: + weight_index = len(colors) * total_weight / n + hue = get_hue_by_weight_index(weight_index) + colors.append(hsv_to_hexrgb((hue, 1, 1))) + return colors + + +def get_hue_by_weight_index(weight_index): + section_begin = 0.0 + for section_end, section_weight in hsv_color_distribution: + if weight_index < section_weight: + section_size = section_end - section_begin + hue = section_begin + ((weight_index / section_weight) * section_size) + return hue + weight_index -= section_weight + section_begin = section_end + + + +# Try to distribute colors in a whay that the psychological +# colors distance is distributed evenly. +hsv_color_distribution = [ + (0.1, 10.0), # orange ... red + (0.2, 10.0), # orange ... yellow(-greenish) + (0.3, 5.0), # green-yellow + (0.4, 2.0), # green + (0.5, 5.0), # green .... cyan + (0.6, 20.0), # cyan ... seablue + (0.7, 10.0), # seablue ... dark blue + (0.8, 20.0), # dark blue ... violet + (0.9, 10.0), # violet .. magenta + (1.0, 20.0), # magenta .. red +] + + + def get_next_random_palette_color(): keys = cmk_color_palette.keys() if html.is_cached("random_color_index"): @@ -277,18 +319,21 @@ def render_color(color_rgb): int(color_rgb[1] * 255), int(color_rgb[2] * 255),) + # Make a color darker. v ranges from 0 (not darker) to 1 (black) def darken_color(rgb, v): def darken(x, v): return x * (1.0 - v) return tuple([ darken(x, v) for x in rgb ]) + # Make a color lighter. v ranges from 0 (not lighter) to 1 (white) def lighten_color(rgb, v): def lighten(x, v): return x + ((1.0 - x) * v) return tuple([ lighten(x, v) for x in rgb ]) + def mix_colors(a, b): return tuple([ (ca + cb) / 2.0 @@ -296,6 +341,7 @@ def mix_colors(a, b): in zip(a, b) ]) + def render_color_icon(color): return "<div class=color style=\"background-color: %s\"></div>" % color