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 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 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,
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 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 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)
]
def powered(self,
by=None,
width=(100, "%"),
height=(None, "px"),
options=None,
profile=None):
"""
Description:
------------
Display badges for the specifies JavaScript modules.
Tip: If by is None. This will display only the main JavaScript module with the current version.
It will not display the underlying components.
This component needs to be called at the end to ensure all the imported will be registered.
:tags:
:categories:
Attributes:
----------
:param by: List. Optional. Name of JavaScript library aliases.
: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.
"""
container = self.page.ui.div(width=width,
options=options,
profile=profile)
container.style.css.font_factor(-4)
if by is None:
by = sorted(list(self.page.jsImports))
elif by is True:
by = []
for alias, pkg in Imports.JS_IMPORTS.items():
if "node_folder" not in pkg:
by.append(alias)
for i, b in enumerate(by):
if b in self.page.imports.jsImports:
if not self.page.imports.jsImports[b]["versions"]:
continue
badge = self.page.ui.div([
self.page.ui.text(
b.capitalize(), height=height, profile=profile),
self.page.ui.text(
"v%s" % self.page.imports.jsImports[b]["versions"][0],
height=height,
profile=profile)
],
width="auto",
profile=profile)
badge[0].style.css.margin_right = 5
badge[0].goto(self.page.imports.website(b), target="_blank")
badge[0].style.css.background = Colors.randColor(
self.page.py.hash(b))
badge[0].style.css.color = "white"
badge[0].style.css.text_shadow = "1px 1px black"
badge[0].style.css.padding = "0 5px"
badge[0].style.css.border_right = "1px solid black"
badge[1].style.css.padding = "0 5px 0 0"
badge.style.css.border = "1px solid %s" % self.page.theme.greys[
5]
badge.style.css.margin = 2
badge.style.css.border_radius = "0 10px 10px 0"
container.add(badge)
html.Html.set_component_skin(container)
return container
def avatar(self,
text="",
image="",
path=None,
status=None,
width=(30, "px"),
height=(30, "px"),
align="center",
htmlCode=None,
profile=None,
options=None):
"""
Description:
------------
Generate or load an avatar
Usage::
rptObj.ui.images.avatar("Epyk", status='out')
rptObj.ui.images.avatar(image="epykIcon.PNG", path=config.IMG_PATH, status=False)
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlContainer.Div`
- :class:`epyk.core.html.HtmlImage.Image`
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py
Attributes:
----------
:param text:
:param image:
:param path:
:param status:
:param width: Optional. Tuple. The component width in pixel or percentage
:param height: Optional. Tuple. The component height in pixel or percentage
:param align: String. Optional. A string with the horizontal position of the component
:param htmlCode: String. Optional. An identifier for this component (on both Python and Javascript side)
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage
:param options: Dictionary. Optional. Specific Python options available for this component
"""
width = Arguments.size(width, "px")
height = Arguments.size(height, "px")
options = options or {}
status_map = {
True: self.context.rptObj.theme.success[1],
'available': self.context.rptObj.theme.success[1],
False: self.context.rptObj.theme.danger[1],
'busy': self.context.rptObj.theme.danger[1],
'out': self.context.rptObj.theme.warning[1]
}
bgcolor, margin_top = None, -5
if image is not None:
img = self.img(image,
path, (width[0] - 5, width[1]),
(height[0] - 5, height[1]),
align="center",
htmlCode=htmlCode,
profile=profile,
options=options)
img.style.css.border_radius = width[0]
img.style.css.margin = 2
margin_top = -8
else:
bgcolor = Colors.randColor(self.context.rptObj.py.hash(text))
img = self.context.rptObj.ui.layouts.div(text[0].upper())
img.style.css.line_height = width[0] - 5
img.style.css.color = "white"
img.style.css.font_size = width[0]
img.style.css.font_weight = 'bold'
img.style.css.padding = 0
img.style.css.middle()
if options.get('status', True):
status_o = self.context.rptObj.ui.layouts.div(" ",
width=(10, "px"),
height=(10, "px"))
status_o.style.css.position = 'relative'
status_o.style.css.background_color = status_map.get(
status, self.context.rptObj.theme.greys[5])
status_o.style.css.border_radius = 10
status_o.style.css.margin_top = margin_top
status_o.style.css.float = 'right'
div = self.context.rptObj.ui.layouts.div([img, status_o],
width=width,
height=height)
div.status = status_o
else:
div = self.context.rptObj.ui.layouts.div([img],
width=width,
height=height)
if bgcolor is not None:
div.style.css.background_color = bgcolor
div.style.css.text_stoke = "1px %s" % bgcolor
div.img = img
div.style.css.borders_light()
div.style.css.border_radius = width[0]
div.img = img
if align == 'center':
div.style.css.margin = "auto"
div.style.css.display = "block"
return div
