def colors(self, hex_values):
"""
Description:
-----------
Set specific chart color codes.
Attributes:
----------
:param hex_values: List. Color codes.
"""
line_colors, bg_colors = [], []
for h in hex_values:
if h.upper() in Colors.defined:
h = Colors.defined[h.upper()]['hex']
if not isinstance(h, tuple):
line_colors.append(h)
bg_colors.append(
"rgba(%s, %s, %s, %s" %
(Colors.getHexToRgb(h)[0], Colors.getHexToRgb(h)[1],
Colors.getHexToRgb(h)[2], self.options.opacity))
else:
line_colors.append(h[0])
bg_colors.append(h[0])
self.options.colors = line_colors
self.options.background_colors = bg_colors
def colors(self, hex_values):
"""
Description:
-----------
Set the colors of the chart.
hex_values can be a list of string with the colors or a list of tuple to also set the bg colors.
If the background colors are not specified they will be deduced from the colors list changing the opacity.
Attributes:
----------
:param hex_values: List. An array of hexadecimal color codes.
"""
line_colors, bg_colors = [], []
for h in hex_values:
if h.upper() in Colors.defined:
h = Colors.defined[h.upper()]['hex']
if not isinstance(h, tuple):
line_colors.append(h)
bg_colors.append(
"rgba(%s, %s, %s, %s" %
(Colors.getHexToRgb(h)[0], Colors.getHexToRgb(h)[1],
Colors.getHexToRgb(h)[2], self.options.opacity))
else:
line_colors.append(h[0])
bg_colors.append(h[0])
self.options.colors = line_colors
self.options.background_colors = bg_colors
series_count = 0
for name in self.options.data.columns:
if name[0] in self.options.data.colors:
self.options.data.colors[
name[0]] = self.options.colors[series_count]
series_count += 1
def customize(self):
rgb = Colors.getHexToRgb(self.page.theme.greys[-1])
rgb_color = Colors.getHexToRgb(self.page.theme.colors[-1])
self.css({
'box-shadow':
"0 0 %(size)spx rgba(%(r)s, %(g)s, %(b)s, %(opac)s)" % {
"r": rgb[0],
"g": rgb[1],
"b": rgb[2],
'opac': 0.5,
'size': 5
}
})
self.hover.css({
'box-shadow':
"0 0 %(size)spx rgba(%(r)s, %(g)s, %(b)s, %(opac)s)" % {
"r": rgb_color[0],
"g": rgb_color[1],
"b": rgb_color[2],
'opac': 0.8,
'size': 5
}
})
self.before.css({
'border-top':
'20px solid %s' % self.page.theme.greys[0],
'border-left':
'20px solid %s' % self.page.theme.colors[2],
})
def colors(self, hex_values: list):
"""
Description:
-----------
Set the colors of the chart.
hex_values can be a list of string with the colors or a list of tuple to also set the bg colors.
If the background colors are not specified they will be deduced from the colors list changing the opacity.
Usage::
Attributes:
----------
:param list hex_values: An array of hexadecimal color codes.
"""
line_colors, bg_colors = [], []
for h in hex_values:
if h.upper() in Colors.defined:
h = Colors.defined[h.upper()]['hex']
if not isinstance(h, tuple):
line_colors.append(h)
bg_colors.append("rgba(%s, %s, %s, %s" % (
Colors.getHexToRgb(h)[0], Colors.getHexToRgb(h)[1],
Colors.getHexToRgb(h)[2], 0.8))
else:
line_colors.append(h[0])
bg_colors.append(h[0])
self.options.colors = line_colors
def polar(self,
record=None,
y_columns=None,
x_axis=None,
profile=None,
width=(100, "%"),
height=(330, "px"),
options=None,
htmlCode=None):
"""
Description:
------------
Display a bubble chart from ChartJs
Related Pages:
https://www.chartjs.org/samples/latest/charts/polar-area.html
Attributes:
----------
:param record: List of dict. The Python recordset
:param y_columns: List. The columns corresponding to keys in the dictionaries in the record
:param x_axis: String. The column corresponding to a key in the dictionaries in the record
:param profile:
:param width: Tuple. The width of the component in the page, default (100, '%')
:param height: Tuple. The height of the component in the page, default (330, "px")
:param options:
:param htmlCode:
"""
options = options or {}
bgColors = [
"rgba(%s, %s, %s, 0.6)" %
(Colors.getHexToRgb(c)[0], Colors.getHexToRgb(c)[1],
Colors.getHexToRgb(c)[2])
for c in self.parent.context.rptObj.theme.charts
]
options.update({
'y_columns': y_columns,
'x_column': x_axis,
"bgColors": bgColors,
'colors': self.parent.context.rptObj.theme.charts,
'attrs': {}
})
data = self.parent.context.rptObj.data.chartJs.y(
record, y_columns, x_axis)
polar_chart = graph.GraphChartJs.ChartPolar(self.parent.context.rptObj,
width, height, htmlCode,
options, profile)
polar_chart.labels(data['labels'])
polar_chart.options.scales.y_axis().display = False
for i, d in enumerate(data['datasets']):
polar_chart.add_dataset(d, data['series'][i])
return polar_chart
def color(self, code, content="data copied to clipboard", width=(20, 'px'), height=(20, 'px'), options=None):
"""
Description:
------------
Color component
Attributes:
----------
:param code: Tuple or String. The color code
:param width:
:param height:
:param options:
"""
dflt_options = {"type": 'rgb', 'popup_timers': 1000}
if options is not None:
dflt_options.update(options)
if dflt_options.get("type") == 'hex' or str(code).startswith("#"):
code = Colors.getHexToRgb(code)
d = self.context.rptObj.ui.div(width=width, height=height)
d.style.css.display = "inline-block"
d.style.css.border = "1px solid %s" % self.context.rptObj.theme.greys[0]
d.tooltip("rgb: %s, hex: %s" % (code, Colors.getRgbToHex(code)))
d.style.css.cursor = "pointer"
d.click([
self.context.rptObj.js.clipboard(Colors.getRgbToHex(code)),
self.context.rptObj.js.print(content, dflt_options.get('popup_timers'), dflt_options.get('popup_css'))])
d.style.css.background = "rgb(%s, %s, %s)" % (code[0], code[1], code[2])
return d
def shadow(self,
hexa_color: str = None,
opacity: float = 0.5,
size: int = 10,
position: str = None,
radius: int = 10):
"""
Description:
------------
Set the box shadow color.
Related Pages:
https://www.w3schools.com/css/css3_shadows.asp
https://gist.github.com/ocean90/1268328
Attributes:
----------
:param str hexa_color: Optional. A hexadecimal color code.
:param str opacity: Optional. The shadow opacity. Default 0.5.
:param int size: Optional. The size of the shadow effect.
:param str position: Optional. The position for the shadow.
:param int radius: Optional. The size for the angle rounding.
:return: The CSS object to allow the functions chaining.
"""
rgb = Colors.getHexToRgb(self.component.page.theme.greys[-1]
if hexa_color is None else hexa_color)
if position == 'right':
self.component.style.css.box_shadow = "%(size)spx 0 %(size)spx -%(size)spx rgba(%(r)s, %(g)s, %(b)s, %(opac)s)" % {
"r": rgb[0],
"g": rgb[1],
"b": rgb[2],
'opac': opacity,
'size': size
}
elif position == 'left':
self.component.style.css.box_shadow = "-%(size)spx 0 5px -%(size)spx rgba(%(r)s, %(g)s, %(b)s, %(opac)s)" % {
"r": rgb[0],
"g": rgb[1],
"b": rgb[2],
'opac': opacity,
'size': size
}
else:
self.component.style.css.box_shadow = "0 0 %(size)spx rgba(%(r)s, %(g)s, %(b)s, %(opac)s)" % {
"r": rgb[0],
"g": rgb[1],
"b": rgb[2],
'opac': opacity,
'size': size
}
self.component.style.css.border_radius = radius
return self
def colors(self, hex_values: list):
"""
Description:
-----------
Set the colors of the chart.
hex_values can be a list of string with the colors or a list of tuple to also set the bg colors.
If the background colors are not specified they will be deduced from the colors list changing the opacity.
Usage::
line = page.ui.charts.apex.line(height=250)
line.colors(["#FFA500", "#FF7F50"])
Attributes:
----------
:param list hex_values: An array of hexadecimal color codes.
"""
line_colors, bg_colors = [], []
for h in hex_values:
if h.upper() in Colors.defined:
h = Colors.defined[h.upper()]['hex']
if not isinstance(h, tuple):
line_colors.append(h)
bg_colors.append(
"rgba(%s, %s, %s, %s" %
(Colors.getHexToRgb(h)[0], Colors.getHexToRgb(h)[1],
Colors.getHexToRgb(h)[2], self.options.opacity))
else:
line_colors.append(h[0])
bg_colors.append(h[0])
self.options.colors = line_colors
self.options.background_colors = bg_colors
for i, rec in enumerate(self.options.all_series):
if hasattr(rec, "backgroundColor"):
rec.backgroundColor = self.options.background_colors[i]
rec.borderColor = self.options.colors[i]
rec.borderWidth = 1
def color(self, hex_value, background=None):
"""
Description:
-----------
Set the colors of the chart.
hex_values can be a list of string with the colors or a list of tuple to also set the bg colors.
If the background colors are not specified they will be deduced from the colors list changing the opacity.
Usage::
Attributes:
----------
:param hex_values: List. An array of hexadecimal color codes.
"""
if background is None:
self.options.fillColor = "rgba(%s, %s, %s, %s" % (
Colors.getHexToRgb(hex_value)[0], Colors.getHexToRgb(hex_value)[1],
Colors.getHexToRgb(hex_value)[2], self.options.opacity)
else:
self.options.fillColor = background
self.options.lineColor = hex_value
self.options.spotColor = hex_value
def color(self,
code,
content="data copied to clipboard",
width=(20, 'px'),
height=(20, 'px'),
options=None,
profile=None):
"""
Description:
------------
Color component.
:tags:
:categories:
Usage::
Attributes:
----------
:param code: Tuple or String. The color code.
:param content:
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
"""
dflt_options = {"type": 'rgb', 'popup_timers': 1000}
if options is not None:
dflt_options.update(options)
if dflt_options.get("type") == 'hex' or str(code).startswith("#"):
code = Colors.getHexToRgb(code)
d = self.page.ui.div(width=width, height=height, profile=profile)
d.style.css.display = "inline-block"
d.style.css.border = "1px solid %s" % self.page.theme.greys[0]
d.tooltip("rgb: %s, hex: %s" % (code, Colors.getRgbToHex(code)))
d.style.css.cursor = "pointer"
d.click([
self.page.js.clipboard(Colors.getRgbToHex(code)),
self.page.js.print(content, dflt_options.get('popup_timers'),
dflt_options.get('popup_css'))
])
d.style.css.background = "rgb(%s, %s, %s)" % (code[0], code[1],
code[2])
html.Html.set_component_skin(d)
return d
def box(self,
hexa_color: str = None,
opacity: float = 0.6,
size: int = 5,
margin_v: tuple = (10, 'px'),
margin_h: tuple = (10, 'px'),
background: str = "white"):
"""
Description:
------------
Add a box shadow layout to the component.
Usage::
page = pk.Page()
page.body.template.style.configs.box()
Attributes:
----------
:param str hexa_color: Optional. The color code in hexadecimal format.
:param float opacity: Optional. The opacity value between 0 and 1.
:param int size: Optional. The border size.
:param int margin_h: Optional. The left and right margin in pixel.
:param int margin_v: Optional. The top and bottom margin in pixel.
:param str background: Optional. The background color.
"""
if self.component.style.css.padding is None:
self.component.style.css.padding = 5
self.component.style.css.width = "calc(100%% - %s%s)" % (
2 * margin_h[0], margin_h[1])
self.component.style.css.margin_v = "%s%s" % (margin_v[0], margin_v[1])
self.component.style.css.margin_h = "%s%s" % (margin_h[0], margin_h[1])
if background is not None:
self.component.style.css.background = background
rgb = Colors.getHexToRgb(self.component.page.theme.greys[5]
if hexa_color is None else hexa_color)
self.component.style.css.box_shadow = "0 0 %(size)spx rgba(%(r)s, %(g)s, %(b)s, %(opac)s)" % {
"r": rgb[0],
"g": rgb[1],
"b": rgb[2],
'opac': opacity,
'size': size
}
return self
def click(self, jsFncs, profile=False, source_event=None, onReady=False):
"""
Description:
------------
Attributes:
----------
:param jsFncs: String or List. The Javascript functions
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage
:param source_event: String. The JavaScript DOM source for the event (can be a sug item)
:param onReady: Boolean. Optional. Specify if the event needs to be trigger when the page is loaded
"""
success = Colors.getHexToRgb(self._report.theme.success[1])
self.style.css.cursor = "pointer"
jsFncs = [
self.dom.querySelector("div").toggle(
"background-color", "rgb(%s, %s, %s)" %
(success[0], success[1], success[2]),
self._report.theme.danger[1])
] + jsFncs
return super(TrafficLight, self).click(jsFncs, profile, source_event,
onReady)
''',
icon="fab fa-css3-alt",
type="info",
color="white",
options={"close": False})
h.style.css.background = "#4C6EF5"
page.ui.layouts.hr()
# Add HTML title
page.ui.title("Color component", 3)
# Add a HTML color component
page.ui.images.color("red")
# Convert the colors to RGB
rgb = Colors.getHexToRgb("#FF0000")
rgba = Colors.rgba(*rgb, alpha=.5)
# Display a color
page.ui.images.color(rgba, color="black")
# Display a range of colors
page.ui.title("Panel colors", 3)
table = page.ui.layouts.table(options={"header": False})
table.style.css.margin_top = 5
# Load the data to the table
range_colors = [
page.ui.images.color(c, color="black")
for c in Colors.colors("#ffffff", "#FF0000", 30)
]
