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